JSFiddle - React, Tailwind, and code Playground

by ShockFamily

HTML

<!DOCTYPE html>

<html>
<head>
    <title>CSS3 Button Tester</title>
    <!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
    <![endif]-->
</head>

<body>

    <div id="wrap">
            
        
        <p class="author">by: Joshua Hibbert</p>
        <button class="press">Press Me!</button>
        
    </div>
  
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

@font-face {
  font-family:League-Gothic;
  src:url("http://static.tumblr.com/unxjxmf/8oKm0yq2w/league-gothic.otf") format("opentype");
}
body{
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;
}
html, body {background:#474747;font-family:League-Gothic,sans-serif;text-align:center;}
#wrap      {width:80%;margin:auto;padding:30px 0px;}
h1, h2     {text-align:left;}
h1         {font-size:72px;color:#222;padding-left:25px;margin-left:-40px;border-left:15px solid #A8A8A8;text-shadow:0px 1px 0 #666;background-color:rgba(0,0,0,0.1);}
h2         {font-size:52px;margin-bottom:20px;color:#222;padding-left:25px;margin-top:20px;margin-left:-40px;border-left:15px solid #EEE;text-shadow:0px 1px 0 #666;}
.author {font:bold 16px Helvatica,Arial,Sans-Serif;color:#676767;text-align:right;margin:-20px 0px 10px 0px;}

/**
 * =======================================================
 * START CSS3 BUTTONS
 * To provide a convenient update, start a new button from top,
 * not from bottom
 * =======================================================
 */

/* Press Button */
.press {
    background: deepSkyblue;
    border: none;
    border-radius: 5px;
    box-shadow: inset 0 -5px 0 hsla(0,0%,0%,.25),
                0 0 5px hsla(0,0%,0%,.25);
    color: hsla(0,0%,0%,.75);
    cursor: pointer;
    font: bold 16px/1 sans-serif;
    padding: 10px 25px 15px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.press:hover,
.press:focus {
    box-shadow: inset 0 -6px 0 hsla(0,0%,0%,.25),
                0 0 6px hsla(0,0%,0%,.25);
    margin-top: -1px;
    padding-bottom: 16px;
}
.press:active {
    box-shadow: inset 0 -2px 0 hsla(0,0%,0%,.25),
                0 0 2px hsla(0,0%,0%,.25);
    margin-top: 3px;
    padding-bottom: 12px;
}


/**
 *...

JavaScript

$('a#toggler').click(function() {
   $('body').toggleClass('light');
   return false;    
});