JSFiddle - React, Tailwind, and code Playground

by kaikemono

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<div>
    
    <a href="#" id="white">Push the button</a>
    
</div>

<p>HelloWorld</p>

CSS

body{
 background:#f0f0f0;
 padding:50px;  
}

div{
 padding:6px 6px 10px 6px;
 background:#f0f0f0;
 float:left;
 margin-right:20px;
 -webkit-border-radius:5px;
 -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
}

#white{
 width:220px;
 height:40px;
 text-align:center;
 color:#666;
 text-decoration:none;
 line-height:40px;
 font-family:'Oswald', Helvetica;
 text-shadow:0px 1px 0 #FFF;
 display:block;
 background: #EBEBEB;
 border:1px solid #aaa;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9F9F9), to(#EBEBEB));
 -webkit-border-radius:5px;
 -webkit-box-shadow:0 1px 0 #FFF inset, 0 0 10px rgba(0, 0, 0, .1) inset, 0 4px 0 #aaa, 0 -1px 0 #F0F0F0 inset;
}

#white:hover{
 background: #F9F9F9;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBEBEB), to(#F9F9F9));   
}

#white:active{
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 0 10px rgba(0, 0, 0, .1) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;  
 position:relative;
 top:4px;
}