JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<button class="white">WHITE</button>
<button class="black">BLACK</button>
<input/>

CSS

body{
    background:#fafafa;
}

* {
    font-size:12px;
    font-weight:normal;
    margin:9px;
}

button.white {
    width:160px;
    height:36px;
    background:#ffffff;
    background:-moz-linear-gradient(top, #ffffff 0%, #f4f4f4 100%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
    background:-webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
    background:-o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
    background:-ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
    background:linear-gradient(to bottom, #ffffff 0%,#f4f4f4 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
    border-top:1px solid #fffffa;
    border-left:1px solid #fffffa;
    border-right:1px solid #e5e5ed;
    border-bottom:1px solid #e5e5ed;
    outline:1px solid #ebebeb;
    box-shadow: inset 0 0 9px 1px #fff;
    color:#1a1a1a;
    border-radius:1px;
}

button:hover{
    cursor:pointer;
}

button.white:active{
    border-top:1px solid #e5e5e5;
    border-left:1px solid #e5e5e5;
    border-right:1px solid #eee;
    border-bottom:1px solid #fffffa;
    box-shadow: inset 1px 3px 9px 1px rgba(0,0,0,0.04);
    color:#060606;
}

button.black {
    width:160px; height:36px;
    background: #1a1a1a;
    background: -moz-linear-gradient(top, #2d2d2d 0%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#1a1a1a), color-stop(100%,#000000));
    background: -webkit-linear-gradient(top, #2d2d2d 0%,#000000 100%);
    background: -o-linear-gradient(top, #2d2d2d 0%,#000000 100%);
    background: -ms-linear-gradient(top, #2d2d2d 0%,#000000 100%);
    background: linear-gradient(to bottom, #2d2d2d 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#000000',GradientType=0 );
    border-top:1px solid #333;
    border-left:1px solid #2d2d2d;
   ...