JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mold Regulation Parameters</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    .movement-row, .delay-row {
      display: flex;
      align-items: center;
      height: 48px; /* Fixed height for alignment */
      margin-bottom: 8px;
      padding: 8px;
      border-radius: 6px;
      transition: background-color 0.2s;
    }
    .closing-row, .closing-delay-row { background-color: rgba(34, 197, 94, 0.05); }
    .opening-row, .opening-delay-row { background-color: rgba(59, 130, 246, 0.05); }
    .venting-row, .venting-delay-row { background-color: rgba(234, 179, 8, 0.05); }
    .movement-row:hover, .delay-row:hover { background-color: rgba(0, 0, 0, 0.02); }
    @media (max-width: 1024px) {
      .movement-row, .delay-row {
        flex-direction: column;
        height: auto;
        gap: 6px;
      }
      .movement-row .speed-pair, .delay-row .delay-pair { margin-bottom: 6px; }
    }
    .speed-pair, .delay-pair { padding: 0 6px; flex: 1; }
    .section-container {
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      background-color: #f9fafb;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    .sub-section-container {
      height: 200px; /* Fixed height for Closing/Opening */
      overflow-y: auto;
      scroll-behavior: smooth;
    }
    .sub-section-container.venting {
      height: 80px; /* Smaller height for Venting */
    }
    .sub-section-header {
      height: 40px; /* Fixed header height */
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      background: linear-gradient(to bottom, #e5e7eb, #f9fafb);
    }
   ...