JSFiddle - React, Tailwind, and code Playground

by ShockFamily

HTML

<div id="container">
    <p>
        <a href="#" class="button">Button</a>
        <a href="#" class="button red">Button</a>
        <a href="#" class="button green">Button</a>
        <a href="#" class="button blue">Button</a>
        <a href="#" class="button yellow">Button</a>
        <a href="#" class="button orange">Button</a>
    </p>
    <p>
        <a href="#" class="button small">Small Button</a>
        <a href="#" class="button small red">Small Button</a>
        <a href="#" class="button small green">Small Button</a>
        <a href="#" class="button small blue">Small Button</a>
        <a href="#" class="button small yellow">Small Button</a>
        <a href="#" class="button small orange">Small Button</a>
    </p>
    <p style="margin-top:1.5em">
        <a href="#" class="button large">Large Button</a>
        <a href="#" class="button large red">Large Button</a>
        <a href="#" class="button large green">Large Button</a>
        <a href="#" class="button large blue">Large Button</a>
        <a href="#" class="button large yellow">Large Button</a>
        <a href="#" class="button large orange">Large Button</a>
    </p>
    <p style="margin-top:2em">
    </p>
    <p>
        <button class="button small">Submit</button>
        <button class="button">Submit</button>
        <input type="submit" class="button large" value="Submit" />
    </p>
    <div id="dark">
        <p>
            <a href="#" class="button">Button</a>
            <a href="#" class="button red">Button</a>
            <a href="#" class="button green">Button</a>
            <a href="#" class="button blue">Button</a>
            <a href="#" class="button yellow">Button</a>
            <a href="#" class="button orange">Button</a>
        </p>
        <p>
            <a href="#" class="button small">Small Button</a>
            <a href="#" class="button small red">Small Button</a>
            <a href="#" class="button small green">Small Button</a>
            <a href="#"...

CSS

body { font: 100%/1.5 Helvetica, Arial, sans-serif }

p { margin-bottom: 1em }

#container {
    width: 900px;
    margin: 0 auto;
}

#dark {
    padding: 1em;
    background: #333;
}

/* ===[ Buttons ]=== */

.button {
    position: relative;
    cursor: pointer;
    font: bold 12px/normal 'Segoe UI', Arial, sans-serif;
    color: #333;
    text-decoration: none;
    text-shadow: 1px 1px rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,.1);
    padding: 5px 10px 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #EEE;
    background-image: -moz-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.2)), color-stop(100%, rgba(0,0,0,0.2)));
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: -o-linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    background-image: linear-gradient(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    -webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 3px 0px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 3px 0px rgba(0,0,0,.2);
    box-shadow: inset 0px 1px rgba(255,255,255,0.6), 0px 0px 4px 0px rgba(0,0,0,.2);
    -webkit-user-select: none;
    -moz-user-select: none;
}

.button::-moz-focus-inner {
    margin: 0;
    padding: 0;
    border: 0;
}

a.button { outline: 0 }

/* ===[ Default hover ]=== */

.button:hover, .button:active {
    text-decoration: none;
    background-color: #F9F9F9;
}

/* ===[ Default active ]=== */

.button:active {
    top: 1px;
    margin-bottom: 1px;
    border-bottom-width: 1px;
    background-color: #F9F9F9;
    background-image: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.2)), color-stop(100%,...