JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<button class="minimal">Send a Message</button>
<button class="minimal">Recommend</button>
<button class="minimal">Request Friendship</button>
<button class="minimal">Remove from Friends</button>
<button class="minimal">Follow</button>
<button class="minimal">Stop Following</button>

CSS

button::-moz-focus-inner {
    border: 0; }

/* minimal
*******************************************************************************/
button.minimal {
    background: #e3e3e3;
    border: 0px solid #bbb;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    color: #333;
    font: normal 12px "helvetica neue", helvetica, arial, sans-serif;
    line-height: 1;
    padding: 6px 0 7px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    width: 210px; }
button.minimal:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
    -ms-box-shadow: inset 0 0 1px 1px #eaeaea;
    -o-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer; }
button.minimal:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -o-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #333; }


/* disabled button styles
works with this markup: <button disabled="disabled">Submit</button>
*******************************************************************************/
button[disabled],
button[disabled]:hover,
button[disabled]:active {
    background: #999;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    color: #aaa;
    cursor: not-allowed;
    text-shadow: none; }

/* Style the example...