Forma industrial brutalista en escala de grises
Un componente de forma complejo, de estilo brutalista, con un esquema de color en escala de grises, diseñado para aplicaciones industriales y de fabricación. Cuenta con elementos de alto contraste, diseños inusuales y capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<div class="min-h-screen bg-neutral-100 dark:bg-neutral-950 p-4 sm:p-8 font-mono text-neutral-900 dark:text-neutral-50 flex items-start justify-center">
<div class="w-full max-w-6xl border-4 border-neutral-900 dark:border-neutral-50 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] grid md:grid-cols-3 overflow-hidden">
<!-- Left Section: Header Block -->
<div class="md:col-span-1 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 p-6 sm:p-8 border-b-4 md:border-b-0 md:border-r-4 border-neutral-900 dark:border-neutral-50">
<h1 class="text-2xl sm:text-3xl font-bold tracking-tighter uppercase mb-4 leading-none">MANUFACTURING OPS. DATA INPUT.</h1>
<p class="text-sm sm:text-base mb-6 border-b-2 border-neutral-50 dark:border-neutral-900 pb-2">RECORD AND MONITOR PRODUCTION FLOW, MACHINE STATUS, AND QUALITY CONTROL METRICS.</p>
<div class="space-y-4">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 10.586V6z" clip-rule="evenodd"></path></svg>
<span class="text-xs sm:text-sm font-semibold">UTC+00:00 - 15:30:45</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
<span class="text-xs sm:text-sm font-semibold">PLANT_A_UNIT_07 - ZONE 3B</span>
</div>
</div>
<img src="https://picsum.photos/300/200?grayscale&random=1" alt="Industrial machinery" class="w-full h-auto mt-8 border-4 border-neutral-50 dark:border-neutral-900 object-cover" style="image-rendering: pixelated;">
</div>
<!-- Right Section: Form Fields -->
<div class="md:col-span-2 p-6 sm:p-8 bg-neutral-100 dark:bg-neutral-950 ">
<form class="space-y-6 sm:space-y-8">
<!-- Production Data Section -->
<div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
<h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">PRODUCTION DATA</h2>
<div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
<div>
<label for="batch-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Batch ID:</label>
<input type="text" id="batch-id" placeholder="BCH-731-X" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
</div>
<div>
<label for="product-code" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Product Code:</label>
<input type="text" id="product-code" placeholder="PRD-A-04" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
</div>
<div>
<label for="quantity-produced" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Quantity Produced:</label>
<input type="number" id="quantity-produced" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
</div>
<div class="lg:col-span-3">
<label for="operator-notes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Operator Notes:</label>
<textarea id="operator-notes" rows="3" placeholder="Add any relevant observations or incidents..." class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm"></textarea>
</div>
</div>
</div>
<!-- Machine Status Section -->
<div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
<h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">MACHINE STATUS</h2>
<div class="grid gap-4 sm:gap-6 md:grid-cols-2">
<div>
<label for="machine-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Machine ID:</label>
<select id="machine-id" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
<option value="">SELECT MACHINE</option>
<option value="MCH-001">CNC MILL 001</option>
<option value="MCH-002">LASER CUTTER 002</option>
<option value="MCH-003">ROBOTIC ARM 003</option>
</select>
</div>
<div>
<label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Status:</label>
<div class="flex flex-wrap gap-x-4 gap-y-2 text-sm">
<label class="inline-flex items-center cursor-pointer">
<input type="radio" name="machine-status" value="operational" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
<span class="ml-2 select-none">Operational</span>
</label>
<label class="inline-flex items-center cursor-pointer">
<input type="radio" name="machine-status" value="maintenance" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
<span class="ml-2 select-none">Maintenance</span>
</label>
<label class="inline-flex items-center cursor-pointer">
<input type="radio" name="machine-status" value="error" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
<span class="ml-2 select-none">Error</span>
</label>
</div>
</div>
<div>
<label for="downtime-minutes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Downtime (min):</label>
<input type="numbeer" id="downtime-minutes" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
</div>
<div>
<label for="last-maintenance" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Last Maintenance:</label>
<input type="date" id="last-maintenance" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
</div>
</div>
</div>
<!-- Quality Control Section -->
<div>
<h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">QUALITY CONTROL</h2>
<div class="grid gap-4 sm:gap-6 md:grid-cols-2">
<div>
<label for="defects-reported" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Defects Reported:</label>
<input type="number" id="defects-reported" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
</div>
<div>
<label for="inspection-result" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Inspection Result:</label>
<select id="inspection-result" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
<option value="">SELECT OUTCOME</option>
<option value="pass">PASS</option>
<option value="fail">FAIL</option>
<option value="review">PENDING REVIEW</option>
</select>
</div>
<div class="md:col-span-2">
<label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Attached Documents:</label>
<div class="flex flex-wrap gap-x-4 gap-y-2 text-sm mt-1">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" name="doc-img" value="img-report" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
<span class="ml-2 select-none">Image Report</span>
</label>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" name="doc-spec" value="spec-sheet" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
<span class="ml-2 select-none">Spec Sheet</span>
</label>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" name="doc-log" value="test-log" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
<span class="ml-2 select-none">Test Log</span>
</label>
</div>
</div>
</div>
</div>
<!-- Submission & Control -->
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-end pt-4 border-t-2 border-neutral-400 dark:border-neutral-700">
<span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 sm:mb-0">FORM VERSION 2.1.b / ENGAGE PROTOCOL 7-ALPHA</span>
<button type="submit" class="px-8 py-3 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 font-bold uppercase border-2 border-neutral-900 dark:border-neutral-50 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] hover:shadow-none transition-all duration-150 ease-in-out text-sm sm:text-base tracking-widest">
SUBMIT DATA
</button>
</div>
</form>
</div>
</div>
</div>Componentes relacionados
Skeuomorphic_Social_Media_Form_Complex
Un componente de formulario de redes sociales complejo y esqueuomórfico con colores complementarios, diseño responsivo y compatibilidad con modo oscuro. Imita las sensaciones y texturas de los botones del mundo real.
Componente de formas brutalistas
Un componente de formularios diseñado con una estética brutalista, utilizando colores pastel, y adecuado para sitios web de negocios/corporativos. Cuenta con un diseño responsivo con soporte para temas oscuros.
Componente de formas brutalistas
Un simple componente de formas de estilo brutalista para las redes sociales. Cuenta con un diseño crudo de alto contraste con colores en escala de grises y responde con soporte para modo oscuro.