JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="">


  <!-- start with a grid-container -->
  <!-- direct children are automatically grid items -->
  <div class="grid-container halves">
    <div>Halves</div>
    <div>Halves</div>
  </div>

  <!-- multiple rows don't require separate containers -->
  <div class="grid-container thirds">
    <div>Thirds</div>
    <div>Thirds</div>
    <div>Thirds</div>
    <div>Thirds</div>
    <div>Thirds</div>
    <div>Thirds</div>
  </div>

  <hr>

  <!-- The above form looks like this -->
  <form>
    <div class="row">
      <div class="six columns">
        <label for="exampleEmailInput">Your email</label>
        <input class="u-full-width" type="email" placeholder="[email protected]" id="exampleEmailInput">
      </div>
      <div class="six columns">
        <label for="exampleRecipientInput">Reason for contacting</label>
        <select class="u-full-width" id="exampleRecipientInput">
          <option value="Option 1">Questions</option>
          <option value="Option 2">Admiration</option>
          <option value="Option 3">Can I get your number?</option>
        </select>
      </div>
    </div>
    <label for="exampleMessage">Message</label>
    <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
    <label class="example-send-yourself-copy">
      <input type="checkbox">
      <span class="label-body">Send a copy to yourself</span>
    </label>
    <input class="button-primary" type="submit" value="Submit">
  </form>


  <hr>

  <ul>
    <li>Item 1</li>
    <li>
      Item 2
      <ul>
        <li>Item 2.1</li>
        <li>Item 2.2</li>
      </ul>
    </li>
    <li>Item 3</li>
  </ul>
</div>

CSS

/*
* Barebones V3
* Copyright 2019 Steve Cochran
*
* Based of Skeleton by Dave Gamache
*
* Free to use under the MIT license.
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Media Breakpoints
- Variables
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* ENV Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Media breakpoint variables for use in media queries
* 	Note: this section is currently commented out pending release of 
* 	final CSS env() spec
*  Breakpoints based on 
*	 https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
* 
*/



/* CSS Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {

  /* default theme: light background, dark text, blue accent */
  --theme-hue: 0;
  /* white */
  --accent-hue: 194;
  /* blue */

  --text-color-richer: hsl(var(--theme-hue), 0%, 5%);
  /* #0d0d0d		*/
  --text-color-normal: hsl(var(--theme-hue), 0%, 13%);
  /* #222222 		text color; button:hover:focus color */
  --text-color-softer: hsl(var(--theme-hue), 0%, 33%);
  /* #555555 		button color; button:hover border */

  --accent-color: hsl(var(--accent-hue), 86%, 57%);
  /* #33C3F0 		link; button-primary bg+border; textarea,select:focus border */
  --accent-color-hover: hsl(var(--accent-hue), 76%, 49%);
  /* #1EAEDB 		link hover; button-primary:hover:focus bg+border */

  --border-color: hsl(var(--theme-hue), 0%, 73%);
  /* #bbbbbb		button border */
  --border-color-softer: hsl(var(--theme-hue), 0%, 82%);
  /* #d1d1d1		textarea,select,code,td,hr border	 */

  --background-color: white;
  /* transparent body background; textarea,select background */
  --background-color-softer: hsl(var(--theme-hue), 0%, 95%);
  --code-background: hsl(var(--theme-hue), 0%, 95%);
  /* #f1f1f1 		code background*/

  --button-primary-color: white;


  /* Note: Skeleton was based off a 10px font sizing for REM...