JSFiddle - React, Tailwind, and code Playground

by JordanForeman

HTML

<section>
    <h3>Buttons</h3>
    <button type="button" class="blue">Click Me!</button>
    <button type="button" class="red">Click Me!</button>
    <button type="button" class="green">Click Me!</button>
    <button type="button" class="yellow">Click Me!</button>
</section>
<section>
    <h3>Messages</h3>
    <div class="message error">ERROR: Something stupid happened</div>
</section>

CSS

Body
{
    margin: 10px;
    background-image: url("http://jordanforeman.com/images/background.jpg");
}

h3
{
    width: 100%;
    color: #FFF;
    border-bottom: 1px solid #FFF;
    margin-bottom: 5px;
    box-shadow: 0 3px 2px -2px #CCC;
    text-shadow: 1px 1px #CCC;
}

section
{
    margin-bottom: 5px;
}

/* Button Globals */
button
{
    color: #FFF;
    text-shadow: 1px 1px 0 #222;
    padding: 5px 12px 5px 12px;
    border-radius: 3px;
}

/* Blue Button */
button.blue
{
    border: 1px solid #003366;
    background-image: linear-gradient(bottom, #033669 2%, #1C6AC4 51%);
    background-image: -o-linear-gradient(bottom, #033669 2%, #1C6AC4 51%);
    background-image: -moz-linear-gradient(bottom, #033669 2%, #1C6AC4 51%);
    background-image: -webkit-linear-gradient(bottom, #033669 2%, #1C6AC4 51%);
    background-image: -ms-linear-gradient(bottom, #033669 2%, #1C6AC4 51%);
}

button.blue:hover
{
    background-image: linear-gradient(bottom, #1A5FA3 2%, #1C6AC4 51%);
    background-image: -o-linear-gradient(bottom, #1A5FA3 2%, #1C6AC4 51%);
    background-image: -moz-linear-gradient(bottom, #1A5FA3 2%, #1C6AC4 51%);
    background-image: -webkit-linear-gradient(bottom, #1A5FA3 2%, #1C6AC4 51%);
    background-image: -ms-linear-gradient(bottom, #1A5FA3 2%, #1C6AC4 51%);
}

/* Red Button */
button.red
{
    border: 1px solid #820000;
    background-image: linear-gradient(bottom, #820000 2%, #FF0000 51%);
    background-image: -o-linear-gradient(bottom, #820000 2%, #FF0000 51%);
    background-image: -moz-linear-gradient(bottom, #820000 2%, #FF0000 51%);
    background-image: -webkit-linear-gradient(bottom, #820000 2%, #FF0000 51%);
    background-image: -ms-linear-gradient(bottom, #820000 2%, #FF0000 51%);
}

button.red:hover
{
    background-image: linear-gradient(bottom, #E01D1D 2%, #FF0000 51%);
    background-image: -o-linear-gradient(bottom, #E01D1D 2%, #FF0000 51%);
    background-image: -moz-linear-gradient(bottom, #E01D1D 2%, #FF0000 51%);
   ...