JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tinkering">
    <div><input type="text" placeholder="Full name" /></div>
    <div><input type="text" placeholder="Email" /></div>  
    <div><input type="text" placeholder="Password" /></div>  
</div>

CSS

#tinkering {
    background-color:#54728c;
    float:left;
    padding:20px; 
}

input {
    background-color: white;
    border: none!important;
    font: 15px "Helvetica Neue",Arial,sans-serif;     
    margin-bottom:15px;
    padding: 9px 7px 10px 7px;
    width: 296px;
    
    /* text */
    color:#999;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    
    /* border radius */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    
    /* box shadow */
    -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, .3),inset 0 1px 2px transparent;
    -moz-box-shadow: 0 -1px 0 transparent,inset 0 1px 2px rgba(0, 0, 0, .2);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 3),inset 0 1px 2px transparent;
    
    /* transition */
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
}

input:focus,input:hover {
    outline:none;
    color:#666;
}

input:focus {
    /* box shadow */
    -webkit-box-shadow:0 -1px 0 rgba(0,0,0,.3),inset 0 1px 2px rgba(0,0,0,.1),0 0 10px rgba(255,255,255,.9);
    -moz-box-shadow:0 -1px 0 rgba(0,0,0,.3),inset 0 1px 2px rgba(0,0,0,.1),0 0 10px rgba(255,255,255,.9);
    box-shadow:0 -1px 0 rgba(0,0,0,.3),inset 0 1px 2px rgba(0,0,0,.1),0 0 10p rgba(255,255,255,.9);    
}