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, maximum-scale=1.0, user-scalable=no">
  <title>Mold Regulation System</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-blue: #0a446d; --secondary-blue: #1C7ED6; --accent-red: #e93b4c; --accent-teal: #17A2B8;
      --bgc-body: #fff; --bgc-section: #6b9ac2; --bgc-input: #fff; --bgc-input-focus: rgb(180, 243, 251);
      --bgc-input-hover: rgb(255, 252, 209); --background-section-light: #e6f2f9; --border-light: #E9ECEF;
      --border-medium: #CED4DA; --border-radius: calc(0.25rem + 0.1vw); --font-color-base: #212529;
      --font-color-label: #000; --font-color-unit: #1d1d1d; --font-color-muted: #6C757D;
      --font-size-root: calc(0.9rem + 0.3vw); --font-size-header: calc(0.95rem + 0.2vw);
      --font-size-label: calc(0.85rem + 0.2vw); --font-size-input: calc(0.8rem + 0.2vw);
      --font-size-unit: calc(0.65rem + 0.1vw); --gap-sm: calc(2px + 0.1vw); --gap-md: calc(4px + 0.3vw);
      --spacing-sm: calc(2px + 0.2vw); --spacing-md: calc(3px + 0.2vw); --section-header-height: calc(2.5rem + 0.5vw);
      --label-width: calc(5rem + 1.5vw); --input-min-width: calc(3rem + 0.5vw); --input-max-width: calc(6rem + 1vw);
      --select-min-width: calc(5rem + 1vw); --select-max-width: calc(8rem + 1.5vw); --section-min-width: calc(300px + 5vw);
      --input-height: calc(1.5rem + 0.3vw); --form-input-padding: calc(3px + 0.2vw) calc(5px + 0.3vw);
      --shadow-md: rgba(0, 0, 0, 0.08); --button-primary-bg: #007bff; --button-primary-hover: #011E33;
      --button-danger-bg: var(--accent-red); --button-danger-hover: #B21F2D;
    }
    *, *::before, *::after {...