JSFiddle - React, Tailwind, and code Playground

by CyberAP

HTML

<html>
<body>
    <a href="http://google.com" 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: -webkit-linear-gradient(#f2f2f2, #e4e4e4 50%), -webkit-linear-gradient(#e4e4e4, #ccc);
    background-image:    -moz-linear-gradient(#f2f2f2, #e4e4e4 50%),    -moz-linear-gradient(#e4e4e4, #ccc);
    background-image:     -ms-linear-gradient(#f2f2f2, #e4e4e4 50%),     -ms-linear-gradient(#e4e4e4, #ccc);
    background-image:      -o-linear-gradient(#f2f2f2, #e4e4e4 50%),      -o-linear-gradient(#e4e4e4, #ccc);
    background-image:         linear-gradient(#f2f2f2, #e4e4e4 50%),         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: -webkit-linear-gradient(#f0f0f0, #e0e0e0 50%), -webkit-linear-gradient(#cfcfcf, #c6c6c6);
    background-image:    -moz-linear-gradient(#f0f0f0, #e0e0e0 50%),    -moz-linear-gradient(#cfcfcf, #c6c6c6);
    background-image:     -ms-linear-gradient(#f0f0f0, #e0e0e0 50%),     -ms-linear-gradient(#cfcfcf, #c6c6c6);
    background-image:      -o-linear-gradient(#f0f0f0, #e0e0e0 50%),      -o-linear-gradient(#cfcfcf, #c6c6c6);
    background-image:         linear-gradient(#f0f0f0, #e0e0e0 50%),        ...