JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<form class="zammad-form">
  <div class="form-group zammad-form-group">
    <label for="zammad-form-name-inline"> Name</label
    ><input
      class="form-control zammad-form-control"
      id="zammad-form-name-inline"
      name="name"
      type="text"
      placeholder="Your Name"
      value=""
      required=""
    />
  </div>
  <div class="form-group zammad-form-group">
    <label for="zammad-form-email-inline"> Email</label
    ><input
      class="form-control zammad-form-control"
      id="zammad-form-email-inline"
      name="email"
      type="email"
      placeholder="Your Email"
      value=""
      required=""
    />
  </div>
  <div class="form-group zammad-form-group">
    <label for="zammad-form-body-inline"> Message</label
    ><textarea
      class="form-control zammad-form-control"
      id="zammad-form-body-inline"
      name="body"
      placeholder="Your Message…"
      rows="7"
      required=""
    ></textarea>
  </div>
  <div class="form-group zammad-form-group">
    <label for="zammad-form-agreement-inline"
      ><input
        type="checkbox"
        name="agreement"
        id="zammad-form-agreement-inline"
        class="zammad-form-checkbox"
        required=""
      />Accept Data
      <a target="_blank" href="/privacy.html">Privacy Policy</a> &amp;
      Acceptable Use Policy</label
    >
  </div>
  <button type="submit" class="btn">Submit</button>
</form>

<script>

  const classMapping = {
    'form-control': 'form-control w-full px-4 py-2 bg-eb-dark border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-eb-red text-white',
    'btn': 'w-full bg-eb-red hover:bg-red-700 text-white px-6 py-3 rounded-md font-medium transition duration-300'
  };

  const idMapping = {
    'username': 'user-name',
    'submitBtn': 'submit-button-id'
  };

  document.addEventListener('DOMContentLoaded', () => {
    const form =...

CSS

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
   ...