JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<section>
            <h1>Forms</h1>

            <div class="form-group">
                <label for="yessir">
                    <input type="checkbox" id="yessir" name="group">
                    This is a thing
                </label>
            </div>

            <div class="form-group">
                <label for="nosir">
                    <input type="checkbox" id="nosir" name="group">
                    This is a thing
                </label>
            </div>

            <div class="form-group">
                <label for="yes">
                    <input type="radio" id="yes" name="group2">
                    This is a thing
                </label>
            </div>

            <div class="form-group">
                <label for="no">
                    <input type="radio" id="no" name="group2">
                    This is a thing
                </label>
            </div>

            <div class="form-group">
                <label for="no">
                    <input type="radio" id="no" name="group" disabled>
                    Aw shucks, this is disabled.
                </label>
            </div>


            <div class="form-group">
                <label for="">Text Input <span class="form-group__req">*</span></label>
                <input type="text" placeholder="Placeholder">
            </div>
            <div class="form-group">
                <label for="">Disabled Text Input <span class="form-group__req">*</span></label>
                <input type="text" placeholder="Placeholder" value="Can't be changing this" disabled>
            </div>
            <div class="form-group">
                <label for="">Number Input <span class="form-group__req">*</span></label>
                <input type="number" placeholder="Placeholder">
            </div>
            <div class="form-group">
                <label for="">Date Input <span class="form-group__opt">(Optional)</span></label>
                <input type="date">
      ...

SCSS

:root {
  --grey0: #f2f1f0;
  --grey10: #e5e4e3;
  --grey20: #d1d0cf;
  --grey30: #bdbcbb;
  --grey40: #a8a7a7;
  --grey50: #969695;
  --grey60: #807f7e;
  --grey70: #6b6b6a;
  --grey80: #575656;
  --grey90: #424242;
  --grey100: #2e2e2d;
  --grey: --grey50;
  --gray: --grey;
  --red0: #ffcfd3;
  --red10: #ffabae;
  --red20: #ff8a8e;
  --red30: #f86368;
  --red40: #ed3b41;
  --red50: #d71920;
  --red60: #bd0f15;
  --red70: #a60d12;
  --red80: #910d11;
  --red90: #7d0c10;
  --red100: #660e11;
  --red: --red50;
  --orange0: #ffdec2;
  --orange10: #ffca9c;
  --orange20: #ffb778;
  --orange30: #ff9e54;
  --orange40: #ff8636;
  --orange50: #ff7214;
  --orange60: #e86107;
  --orange70: #d65409;
  --orange80: #c2480c;
  --orange90: #a63907;
  --orange100: #802904;
  --orange: --orange50;
  --yellow0: #fff5c7;
  --yellow10: #fff1ad;
  --yellow20: #ffeb8a;
  --yellow30: #ffe46e;
  --yellow40: #ffdc4f;
  --yellow50: #fad12d;
  --yellow60: #f2bf18;
  --yellow70: #e8ac15;
  --yellow80: #de9b0b;
  --yellow90: #cc8500;
  --yellow100: #b06204;
  --yellow: --yellow50;
  --green0: #dbf7be;
  --green10: #bbed8e;
  --green20: #9cd66d;
  --green30: #75ba4a;
  --green40: #529c2d;
  --green50: #3b7d1a;
  --green60: #316916;
  --green70: #2d5c15;
  --green80: #264f12;
  --green90: #224510;
  --green100: #1b380d;
  --green: --green50;
  --cyan0: #ccfffa;
  --cyan10: #9afcf3;
  --cyan20: #6cf0e3;
  --cyan30: #33ded0;
  --cyan40: #00c7ba;
  --cyan50: #00ada5;
  --cyan60: #008f88;
  --cyan70: #007872;
  --cyan80: #006661;
  --cyan90: #00524e;
  --cyan100: #003d3b;
  --cyan: --cyan50;
  --blue0: #c9f0ff;
  --blue10: #a1e3ff;
  --blue20: #70cdff;
  --blue30: #42adeb;
  --blue40: #208fd4;
  --blue50: #0072ba;
  --blue60: #05629c;
  --blue70: #095482;
  --blue80: #0a476e;
  --blue90: #093c5c;
  --blue100: #093047;
  --blue: --blue50;
  --purple0: #efe0ff;
  --purple10: #e3cafc;
  --purple20: #d3b0f5;
  --purple30: #bb8ee8;
  --purple40: #9f68d9;
  --purple50: #844bbd;
  --purple60: #6e409c;
 ...