JSFiddle - React, Tailwind, and code Playground

by mrmartineau

HTML

<div id="body">
    
    <a href="#" class="white">Download</a>
    <br /><br /><br />
    <a href="#" class="white">Hover and Active states</a>
    <br /><br /><br />
    <a href="#" class="white pressin">Try clicking me!  I have the 'pressin' state.</a>

    <br /><br /><br /><br /><br />
    
    <a href="#" class="white">White - Lorem ipsum dolor.</a>
    <br /><br /><br />
    <a href="#" class="red">Red - Morbi malesuada nulla.</a>
    <br /><br /><br />
    <a href="#" class="yellow">Yellow - Donec semper quam.</a>
    <br /><br /><br />
    <a href="#" class="green">Green - Mauris iaculis porttitor.</a>
    <br /><br /><br />
    <a href="#" class="cyan">Cyan - Nunc eu ullamcorper.</a>
    
</div>

CSS

#body { padding: 10px; }

a {
    font-family: "Helvetica", Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    padding: 8px 19px;
}
    a:before, a:after {
        height: 29px;
        width: 1px;
        content: '';
        position: absolute;
        margin-top: -5px;
    }
    a:before { margin-right: 19px; }
    a:after { margin-left: 19px; }
    @-moz-document url-prefix() { a:before { margin-left: -20px; } }
    a:active:before, a:active:after { display: none; }



.white {
    color: #4A4A4A;
    text-shadow: 0 1px 0 white;
    background-color: #F1F1F1;
    background-image: -moz-linear-gradient(100% 100% 90deg, #E0E0E0, #F6F6F6);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F6F6F6), to(#E0E0E0));
    border: 1px solid #B2B2B2;
    border-top: 1px solid #C9C9C9;
    border-bottom: 1px solid #8F8F8F;
    -webkit-box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
        -moz-box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
        box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0 #B0B0B0, 0 5px 5px rgba(0,0,0,0.25), inset 0 0 2px 1px rgba(255,255,255,0.9);
}
    .white:after {
        background-image: -moz-linear-gradient(100% 100% 90deg, #8F8F8F, #C9C9C9);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9C9C9), to(#8F8F8F));
    }
    .white:before {
        background-image: -moz-linear-gradient(100% 100% 90deg, #8F8F8F, #C9C9C9);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9C9C9), to(#8F8F8F));
    }
    .white:hover {
        -webkit-box-shadow: 0 1px 0 #C0C0C0, 0 2px 0 #BFBFBF, 0 3px 0 #BBBBBB, 0 4px 0...