Brutalista Scala di Grigi Forma Industriale
Un componente di forma complesso, in stile brutalista, con una combinazione di colori in scala di grigi, progettato per applicazioni industriali e manifatturiere. Presenta elementi ad alto contrasto, layout insoliti e reattività completa con il supporto della modalità oscura.
Codice 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>Componenti correlati
Healthcare_Form_Gradient_Neon
Un componente di forma sanitaria complesso e reattivo con sfumature di colore neon/elettriche e transizioni fluide, che supporta la modalità scura. Progettato per applicazioni mediche con più elementi interattivi.
Photography_Contact_Form
Un modulo di contatto pulito e minimalista per i portfolio fotografici, ispirato alla tipografia svizzera/internazionale, caratterizzato da una tavolozza di colori retrò/vintage tenui. Completamente reattivo con supporto per la modalità scura.
Componente Moduli minimalisti
Un componente di forma minimalista su misura per i portfolio, caratterizzato da una combinazione di colori pastello, layout semplice, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.