JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <a href="#" class="magicButton">I am a button!</a>
</body>
</html>

CSS

html
{
    background: #f2fbfc;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}

body
{
    padding: 5px;
    margin: auto;
    display: table-cell;
    vertical-align: middle;
}


.magicButton
{
    color: #444;
    font: bold 16px arial;
    background: #e4e4e4;
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 8px 12px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);
    
    background-image: linear-gradient(#f2f2f2, #e4e4e4 50%), linear-gradient(#e4e4e4, #ccc);
    background-image: -o-linear-gradient(#f2f2f2, #e4e4e4 50%), -o-linear-gradient(#e4e4e4, #ccc);
    background-image: -ms-linear-gradient(#f2f2f2, #e4e4e4 50%), -ms-linear-gradient(#e4e4e4, #ccc);
    background-image: -moz-linear-gradient(#f2f2f2, #e4e4e4 50%), -moz-linear-gradient(#e4e4e4, #ccc);
    background-image: -webkit-linear-gradient(#f2f2f2, #e4e4e4 50%), -webkit-linear-gradient(#e4e4e4, #ccc);
    background-image: -webkit-gradient(#f2f2f2, #e4e4e4 50%), -webkit-linear-gradient(#e4e4e4, #ccc);
}
.magicButton:active
{
    color: #666;
    position: relative;
    top: 1px;
    text-shadow: 0 -1px #fff;
    box-shadow: inset 0 1px 4px 1px rgba(0,0,0,0.1), inset 0 6px 14px rgba(0,0,0,0.07), 0 1px #fff;
    
    background-image: -linear-gradient(#f0f0f0, #e0e0e0 50%), linear-gradient(#cfcfcf, #c6c6c6);
    background-image: -o-linear-gradient(#f0f0f0, #e0e0e0 50%), -o-linear-gradient(#cfcfcf, #c6c6c6);
    background-image: -ms-linear-gradient(#f0f0f0, #e0e0e0 50%), -ms-linear-gradient(#cfcfcf, #c6c6c6);
    background-image: -moz-linear-gradient(#f0f0f0, #e0e0e0 50%), -moz-linear-gradient(#cfcfcf, #c6c6c6);
    background-image: -webkit-linear-gradient(#f0f0f0, #e0e0e0 50%),...