Composants Formes Forme industrielle brutaliste en niveaux de gris

Forme industrielle brutaliste en niveaux de gris

Un composant de forme complexe, de style brutaliste avec une palette de couleurs en niveaux de gris, conçu pour les applications industrielles et manufacturières. Comprend des éléments très contrastés, des mises en page inhabituelles et une réactivité totale avec la prise en charge du mode sombre.

Aperçu

HTML Code

<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>

Composants associés

Composant Formulaires

Un composant de formulaires réactifs conçu dans le style Material Design à l’aide de Tailwind CSS, avec des mises en page de grille, des ombres et la prise en charge du mode sombre.

Ouvrir

Brutalism_Music_Audio_Form

Une forme complexe, de style brutaliste, pour les plates-formes musicales/audio avec une palette de couleurs bonbon/doux, avec plusieurs types d’entrée, la prise en charge du mode sombre et une réactivité totale.

Ouvrir

Composant Formulaires

Composant Forms avec le style Glassmorphism, la palette de couleurs vives et la complexité simple pour le portefeuille. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.

Ouvrir