JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testDiv">
Default text box:<br/>
<input type="text" />

<div id="spacer"></div>
CSS3 styled text box:
<br>
<input type="text" class="awesome-text-box" />
</div>

CSS

/*Not related to example*/
body {font-family:Helvetica;line-height:1.8em;color:#777;text-shadow:0px 1px 1px #fff;}
#spacer{height:0;width:300px;border-top:solid 1px #ddd;border-bottom:solid 1px #fff;margin:5px 0;}
#testDiv{background:#f7f7f7;padding:20px;height:200px;}

/*Styles related with example*/
.awesome-text-box{
    
    padding: 5px;    
    border: 1px solid #DDDDDD;
    
    /*Applying CSS3 gradient*/
    background: -moz-linear-gradient(center top , #FFFFFF,  #EEEEEE 1px, #FFFFFF 20px);    
    background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(5%, #EEEEEE) to(#FFFFFF));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');
    
    /*Applying CSS 3radius*/    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    /*Applying CSS3 box shadow*/
    -moz-box-shadow: 0 0 2px #DDDDDD;
    -webkit-box-shadow: 0 0 2px #DDDDDD;
    box-shadow: 0 0 2px #DDDDDD;

}
.awesome-text-box:hover
{
    border:1px solid #cccccc;
}
.awesome-text-box:focus
{
    box-shadow:0 0 2px #FFFE00;
}