JSFiddle - React, Tailwind, and code Playground

by danielcgold

HTML

<form>
    <input type="text" data-default="Your Email Here" />
    <button>Sign me up</button>
</form>

CSS

body { padding: 25px; }

* {
    -webkit-transition: all 300ms ease-in-out 0ms; /* property duration timing-function delay */
    -moz-transition: all 300ms ease-in-out 0ms;
    -o-transition: all 300ms ease-in-out 0ms;
    transition: all 300ms ease-in-out 0ms;
}
button {                                             
    border: #AEBB5E; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); padding: 5px 10px; font-size: 12px; text-transform: uppercase;

    background: #98212A;
    background: -webkit-gradient(linear, left top, left bottom, from(#98212A), to(#69181E)); 
    background: -webkit-linear-gradient(top, #98212A, #69181E); 
    background:    -moz-linear-gradient(top, #98212A, #69181E); 
    background:     -ms-linear-gradient(top, #98212A, #69181E); 
    background:      -o-linear-gradient(top, #98212A, #69181E); 
    background:         linear-gradient(top, #98212A, #69181E);
  
  -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
          border-radius: 3px;
          

  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
          box-shadow: 0 0 5px rgba(0, 0, 0, .3);

}
button:hover, button:focus { 
     text-shadow: 1px 1px 8px rgba(255, 255, 255, .7); outline: 0;                
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .6);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .6);
          box-shadow: 0 0 5px rgba(0, 0, 0, .6);
}

input { background: #f1f4e7; color: #888; border: 1px solid #dde0cc; padding: 5px; font-family: 'Merriweather', serif; font-size: 12px; outline: 0;

  -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
          border-radius: 2px;
}
input:focus { 
    background: #edeee7; border: 1px solid #c9c9c9; color: #666; outline: 0;
  -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
          border-radius: 4px;
} 


/*** Top Header **********************************************/
form { width: 400px;}
input { display: block; width: 200px; }
input:focus {...