JSFiddle - React, Tailwind, and code Playground

HTML

<input id="user_email" class="title" type="text" size="255" name="user[email]" maxlength="255" autocomplete="off">

CSS

input, textarea, select {
    
    width: 200px;
    height:200px;
    -moz-box-sizing: border-box;
    border: 5px solid #CCCCCC;
    border-bottom-right-radius: 17px;
    border-top-left-radius: 17px;
    color: #333333;
    display: block;
    font-family: "Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
    font-size: 12px;
    margin: 0 0 0.3em;
    padding: 3px 0 3px 3px;
}
input[type="text"],textarea,input[type="search"],input[type="password"],input[type="email"],input[type="url"],input[type="search"] {
background-attachment:scroll;
background-clip:border-box;
background-color:#F8F8F8;
background-image:0;
background-origin:padding-box;
background-position:0 0;
background-repeat:repeat-x;
background-size:100% 4px;
width:100%;
}

input[type="text"]:focus,input[type="text"]:hover,input[type="text"].focus,textarea:focus,textarea:hover,textarea.focus,input[type="search"]:focus,input[type="search"]:hover,input[type="search"].focus,input[type="password"]:focus,input[type="password"]:hover,input[type="password"].focus,input[type="email"]:focus,input[type="email"]:hover,input[type="email"].focus,input[type="url"]:focus,input[type="url"]:hover,input[type="url"].focus,input[type="search"]:focus,input[type="search"]:hover,input[type="search"].focus {
background-color:#f0f6fb;
background:0 repeat-x scroll 0 0 #f0f6fb;
-moz-background-size:100% 4px;
-webkit-background-size:100% 4px;
background-size:100% 4px;
}

input[type="text"]:disabled:hover,textarea:disabled:hover,input[type="search"]:disabled:hover,input[type="password"]:disabled:hover,input[type="email"]:disabled:hover,input[type="url"]:disabled:hover,input[type="search"]:disabled:hover {
background-color:#f8f8f8!important;
background:0 repeat-x scroll 0 0 #f8f8f8;
-moz-background-size:100% 4px;
-webkit-background-size:100% 4px;
background-size:100%...