JSFiddle - React, Tailwind, and code Playground

by andi msc

HTML

<a href="#" class="button big blue">TEXT HERE</a> 
    <a href="#" class="button big green">TEXT HERE</a>
<br/><br/>
    <a href="#" class="button big orange">TEXT HERE</a> 
    <a href="#" class="button big gray">TEXT HERE</a>
<br/><br/>
<a href="#" class="button blue medium">TEXT HERE</a>
    <a href="#" class="button green medium">TEXT HERE</a>
<br/><br/>
    <a href="#" class="button orange medium">TEXT HERE</a>
    <a href="#" class="button gray medium">TEXT HERE</a>
<br/><br/>
    <a href="#" class="button small blue">TEXT HERE</a>
    <a href="#" class="button small green">TEXT HERE</a>
    <a href="#" class="button small orange">TEXT HERE</a>
    <a href="#" class="button small gray">TEXT HERE</a>
<br/><br/>
    <a href="#" class="button small blue rounded">TEXT HERE</a>
    <a href="#" class="button small green rounded">TEXT HERE</a>
    <a href="#" class="button small orange rounded">TEXT HERE</a>
    <a href="#" class="button small gray rounded">TEXT HERE</a>

CSS

.button {
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none!important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
background-repeat:no-repeat;
background-image:url(http://4.bp.blogspot.com/-u1kCU4thXF8/UMiIet5tqwI/AAAAAAAAD0M/N6PsS4SKRxs/s1600/widgetgenerators.blogspot.com-button_bg.png);
background-position:bottom left, top right, 0 0 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
padding:10px 20px;
}

.button:hover {
background-position:top left, bottom right, 0 0 0 0;
}

.button:active {
bottom:-1px;
}

.button.big {
font-size:30px;
}

.button.medium {
font-size:18px;
}

.button.small {
font-size:13px;
}

.button.rounded {
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

.blue.button {
color:#0f4b6d!important;
border:1px solid #84acc3!important;
background-color:#48b5f2;
background-image:url(http://4.bp.blogspot.com/-u1kCU4thXF8/UMiIet5tqwI/AAAAAAAAD0M/N6PsS4SKRxs/s1600/widgetgenerators.blogspot.com-button_bg.png), url(http://4.bp.blogspot.com/-u1kCU4thXF8/UMiIet5tqwI/AAAAAAAAD0M/N6PsS4SKRxs/s1600/widgetgenerators.blogspot.com-button_bg.png), 0 to(rgba(89,208,244,0))), 0 to(#3faeeb));
}

.blue.button:hover {
background-color:#63c7fe;
background-image:url(http://4.bp.blogspot.com/-u1kCU4thXF8/UMiIet5tqwI/AAAAAAAAD0M/N6PsS4SKRxs/s1600/widgetgenerators.blogspot.com-button_bg.png), url(http://4.bp.blogspot.com/-u1kCU4thXF8/UMiIet5tqwI/AAAAAAAAD0M/N6PsS4SKRxs/s1600/widgetgenerators.blogspot.com-button_bg.png), 0 to(rgba(109,217,250,0))), 0 to(#58bef7));
}

.green.button {
color:#345903!important;
border:1px solid...