JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<div style="clear: both;">
    <div><a href="#" class="complete button-action">action button</a></div>
</div>
<div style="clear: both;">
    <div><a href="#" class="select button-positive">positive button</a></div>
</div>
<div style="clear: both;">
    <div><a href="#" class="complete-off button-off">button is off</a></div>
</div>
<div style="clear: both;">
    <div><a href="#" class="flow button-neutral">neutral button</a></div>
</div>
<div style="clear: both;">
    <div><a href="#" class="preview button-neutral">neutral mini</a></div>
</div>

CSS

body {
    margin: 30px;
    background-color: #d5d7d9;
}

/* button general settings */
.button-top,
.button-off,
.button-action,
.button-positive,
.button-neutral{
    /* layout */
    float: left;
    display: block;
    margin: 0 0 10px;
    /* button designs */
    border-radius: 4px;
    /* button text design */
    font-weight: bold;
    text-decoration: none;
    /* optional */
    -webkit-transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
}

/* button green */
.button-positive{
    /* background gradations */
    background-color: #82ba2a;
    background-image: -moz-linear-gradient(top,  rgba(130,186,42,0) 0%, rgba(130,186,42,0.07) 7%, rgba(110,167,64,0.85) 85%, rgba(110,167,64,1) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,186,42,0)), color-stop(7%,rgba(130,186,42,0.07)), color-stop(85%,rgba(110,167,64,0.85)), color-stop(100%,rgba(110,167,64,1)));
    background-image: -webkit-linear-gradient(top,  rgba(130,186,42,0) 0%,rgba(130,186,42,0.07) 7%,rgba(110,167,64,0.85) 85%,rgba(110,167,64,1) 100%);
    background-image: -o-linear-gradient(top,  rgba(130,186,42,0) 0%,rgba(130,186,42,0.07) 7%,rgba(110,167,64,0.85) 85%,rgba(110,167,64,1) 100%);
    background-image: -ms-linear-gradient(top,  rgba(130,186,42,0) 0%,rgba(130,186,42,0.07) 7%,rgba(110,167,64,0.85) 85%,rgba(110,167,64,1) 100%);
    background-image: linear-gradient(top,  rgba(130,186,42,0) 0%,rgba(130,186,42,0.07) 7%,rgba(110,167,64,0.85) 85%,rgba(110,167,64,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0082ba2a', endColorstr='#6ea740',GradientType=0 );
    /* borders and shadows */
    border: 1px solid #498211;
    box-shadow: inset 0 1px 0 #d1e5b5, 0 2px 2px rgba(73,124,27,0.35);
    /* text */
    color: #fff;
    text-shadow: 0 -1px 0 #337200;
}
.button-positive:hover{
    background-color: #6ea740;
}
.button-positive:active{
    border-color: #416300;
   ...