JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<script src="https://fonts.googleapis.com/css?family=Gochi+Hand"></script>
<div>

  <input type="text" />
  <select>
    <option>Please choose...</option>
    <option>Please choose...</option>
    <option>Please choose...</option>
    <option>Please choose...</option>
  </select>
  <div class="no-border">
    <input type="checkbox" id="check" /><label class="checkbox" for="check"> Can we spam you forever?</label>
  </div>
  <div class="no-border">
    <textarea></textarea>
  </div>
</div>

<div class="tabs">
  <ul>
    <li>Tab 1</li>
    <li class="selected">Tab 2</li>
  </ul>
  <div class="no-border">
    <h2>
    Tab title
    </h2>
  </div>
</div>

SCSS

body, select, table, input {
  font-family: 'Gochi Hand', cursive;
  text-transform: uppercase;
}

input[type="checkbox"] {
  display: none;
  + label:before {
    display: inline-block;
    content: '';
    padding: 0!important;
  }
  &:checked + label:before {
    background: #050;
  }
}

div:not(.no-border),
input[type="text"],
input[type="button"],
input[type="password"],
input[type="number"],
input[type="checkbox"] + label:before,
select,
textarea,
.tabs > ul li {
  border-image: url('https://i.imgur.com/a5HjWhX.png') 10 10 repeat;
  border-style: solid;
  border-width: 10px;
  padding: 5px;
  outline: 0;
}

select {
  padding: 1px 5px 3px;
}

div:not(.no-border) {
  margin: 0 0 15px;
}

div.tabs {
  margin: 45px 0 15px;
  position: relative;
  > ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: -43px;
    li {
      background-color: #D0D0D0;
      border-bottom: 0;
      cursor: pointer;
      display: inline-block;
      margin: 0;
      padding: 0 5px;
      &.selected {
        background-color: #FFF;
        padding: 0 5px 3px;
      }
    }
  }
}