JSFiddle - React, Tailwind, and code Playground
HTML
<body><form action="" method="post" name="myform" id="myform" onsubmit="return formSubmit(this);" class="form-wrapper cf">
<input name="statusid" autocomplete="off" id="statusid" placeholder="Enter ID Here" required="" type="text">
<input name="submit_btn" class="submit" id="submit_btn" value="Submit" type="submit"</input>
</form></body>
CSS
body { font: 15px 'Lucida sans', Arial, Helvetica; color: #eee; text-align: center; } a { color: #ffffff; } /*-------------------------------------*/ .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } /*-------------------------------------*/ .form-wrapper { width: 570px; padding: 18px; margin: 5px; background: #444; background: rgba(0,0,0,.2); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); } .form-wrapper input { width: 450px; height: 20px; padding: 10px 5px; float: left; font: 18px arial,sans-serif; border: 0; background: #eee; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: bold ; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: bold; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: bold; } .form-wrapper button { overflow: visible; position:...