JSFiddle - React, Tailwind, and code Playground

by mromanbanks

HTML

<div>
  <button class="primary">
  hello
  </button>
  
  <button class="button secondary">
  hello
  </button>
  
  <select class="select-css">
  <option>hello</option>
  </select>
  
  <input type="text">
</div>

CSS

:root {
    color-scheme: light dark;
    /* View Size */
    --width: 100%;
    --height: 466px;
    /* Design Tokens */
    --color-accent: -apple-system-control-accent;
    --color-white: #ffffff;
    --color-grey-lightest: #f9f9f9;
    --color-grey-lighter: #ededed;
    --color-grey-light: #d4d4d4;
    --color-grey: #bfbfbf;
    --color-grey-dark: #707070;
    --color-grey-darker: #4c4c4c;
    --color-black: #000000;
    --color-primary: #fa6400;
    --color-primary-dark: #ffffff;
    --color-primary-light: #ffffff;
    --color-primary-lighter: #ffffff;
    --color-primary-lightest: #ffffff;
    --color-status-danger: #ff0000;
    --color-status-warning: #ff0000;
    --color-status-success: #ff0000;
    --color-trasparency-black-10: rgba(0, 0, 0, 0.1);
    --color-trasparency-black-24: rgba(0, 0, 0, 0.24);
    --color-trasparency-white-10: rgba(255, 255, 255, 0.1);
    --color-trasparency-white-24: rgba(255, 255, 255, 0.24);
    --color-gradient-primary: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.2) 100%
    );
    --opacity-30: 0.3;
    --opacity-50: 0.5;
    --opacity-75: 0.75;
    --opacity-85: 0.85;
    /* Space */
    --space-xxx-small: 2px;
    --space-xx-small: 4px;
    --space-x-small: 8px;
    --space-small: 12px;
    --space-medium: 16px;
    --space-large: 20px;
    --space-x-large: 24px;
    --space-xx-large: 36px;
    --space-xxx-large: 48px;
    --space-xxxx-large: 72px;
    /* Sizes */
    --size-xx-small: 10px;
    --size-x-small: 16px;
    --size-small: 20px;
    --size-medium: 24px;
    --size-large: 30px;
    --size-x-large: 36px;
    --size-xx-large: 48px;
    --size-xxx-large: 72px;
    --size-layout-max-width: 100%;
    --size-header: var(--size-xxx-large);
    --size-footer: var(--size-xx-large);
    --border-width-default: 0.5px;
    --border-width-selected: 1px;
    /* Texts */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
   ...