JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<a class="big blue" href="#" title="Title for the button">Download Now</a>

<a class="sml blue" href="#" title="Title for the button">Download Now</a>

<a class="big green" href="#" title="Title for the button">Download Now</a>
<a class="sml green" href="#" title="Title for the button">Download Now</a>

<a class="big orange" href="#" title="Title for the button">Download Now</a>
<a class="sml orange" href="#" title="Title for the button">Download Now</a>

CSS

/* buttons */
a.sml{display:inline-block;min-width:90px;height:10px;margin:10px 0;padding:8px 15px;line-height:.9em;font-size:12px;color:#fff;font-weight:bold;text-align:center;text-transform:uppercase;text-decoration:none;}
a.big{display:inline-block;min-width:150px;height:16px;margin:10px 0;padding:8px 25px;line-height:15px;color:#fff;font-weight:bold;text-align:center;text-transform:uppercase;text-decoration:none;}
a.blue{text-shadow:0 1px rgba(0,0,0,0.1);background-color:#4D7BD6;background-image:-webkit-gradient(linear,left top,left bottom,from(#5689DB),to(#4D7BD6));background-image:-webkit-linear-gradient(top,#5689DB,#4D7BD6);background-image:-moz-linear-gradient(top,#5689DB,#4D7BD6);background-image:-ms-linear-gradient(top,#5689DB,#4D7BD6);background-image:-o-linear-gradient(top,#5689DB,#4D7BD6);background-image:linear-gradient(top,#5689DB,#4D7BD6);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#5689DB',EndColorStr='#4D7BD6');border:1px solid #2D53AF;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 2px 0 0 rgba(255,255,255,.06) inset,0 2px 3px 0 rgba(0,0,0,.2);-moz-box-shadow:0 2px 0 0 rgba(255,255,255,.06) inset,0 2px 3px 0 rgba(0,0,0,.2);box-shadow:0 2px 0 0 rgba(255,255,255,.06) inset,0 2px 3px 0 rgba(0,0,0,.2);}
a.blue:hover{background-color:#5C92FF;background-image:-webkit-gradient(linear,left top,left bottom,from(#669EFF),to(#5286FF));background-image:-webkit-linear-gradient(top,#669EFF,#5286FF);background-image:-moz-linear-gradient(top,#669EFF,#5286FF);background-image:-ms-linear-gradient(top,#669EFF,#5286FF);background-image:-o-linear-gradient(top,#669EFF,#5286FF);background-image:linear-gradient(top,#669EFF,#5286FF);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#669EFF',EndColorStr='#5286FF');border:1px solid #4076FF;}
a.green{text-shadow:0 1px rgba(0,0,0,0.1);background-color:#5FB000;background-image:-webkit-gradient(linear,left top,left...