JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<button class="btn">small</button>
<button class="btn-blue">general</button>

CSS

.btn {
    display: inline-block;
    *border-bottom: 0 none #b3b3b3;
    display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding: 2px 10px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #4772A6;
    /*text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);*/
    background-color: #FAF7F7;
    background-repeat: repeat-x;
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-left: .3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    background-image: linear-gradient(to bottom, #E6E6E6, #cccccc);
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    /***border-left-style: none;*/
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
    border-bottom-color:#E8E8E8;
    border-bottom-width:1px;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #333;
    background-color: #E6E6E6;
    *background-color: #D1D1D1;
    background-image: linear-gradient(to bottom, #eee, #D4D4D4);
}
.btn:active, .btn.active {
    background-color: #E6E6E6;
}
.btn:first-child {
    *margin-left: 0;
    margin-left: 0;
}

/*BLUE*/
.btn-blue {
    display: inline-block;
    *border-bottom: 0 none #b3b3b3;
    display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    padding: 4px 14px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align:...

JavaScript

/*main blue- #4f81bd*/
/*darker blue -#385B85*/
/*bright blue- #3F95FC*/
/*light blue - #C5DDFA*/
/*even lighter blue - #CFE4FC*/
/*light green-#E5FAD4*/
/*light yellow - #F6F7D0*/
/*headings grey - #666666*/