JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<button>Hello World</button>

<a class="button" href="#">Hello World</a>

<span class="button">Hello World</span>

<div class="button">Hello World</div>

<hr>

<button class="blue">Hello World</button>

<button class="pink">Hello World</button>

<button class="turquoise">Hello World</button>

CSS

* {
  -webkit-box-sizing: border-box;
   -khtml-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 87.5%;
}
body {
  position: relative;
  top: 0;
  bottom: 0;
  min-height: 100%;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "proxima-nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -khtml-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: subpixel-antialiased;
  -ms-font-smoothing: subpixel-antialiased;
  -o-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
  opacity: 0.999999;
  -webkit-transform: translate3d(0, 0, 0);
}
.font-face.wf-proximanova-i7-active.wf-proximanova-i4-active.wf-proximanova-n4-active.wf-proximanova-n7-active.wf-proximanova-n1-active.wf-proximanova-n3-active.wf-proximanova-n9-active body {
  font-family: "proxima-nova";
}




button, .button {
    display: inline;
    position: relative;
    -webkit-appearance: none;
    vertical-align: baseline;
    width: auto;
    height: auto;
    padding: .5em 1em;
    margin: 1px;
    
    font: inherit;
    line-height: inherit;
    text-decoration: inherit;
    
    background: rgba(0, 0, 0, .15);
    border: 1px solid rgba(0, 0, 0, .15);
    color: rgba(0, 0, 0, .5);
    
    border-radius: 1px;
}

button.blue,
.button.blue {
    background: #1fb8eb
}

button.blue,
.button.blue {
    background: #1fb8eb
}

button.pink,
.button.pink {
    background: #eb1fb8
}

button.pink,
.button.pink {
    background: #eb1fb8
}

button.turquoise,
.button.turquoise {
    background:...