JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="field-list mt10px">
 <li>
  <input class="text-input email" id="username" name="username" type="email" placeholder="E-mail address" maxlength="50"/></li>
  <li class="last">
    <input class="text-input password caps" id="password" name="password" type="password" placeholder="Password" maxlength="50" />                            
  </li>
   <li class="last">
    <p class="field-error lp_login_error" id="login-error" style="display: none;">some error</p>
    <p class="field-error lp_login_error_1" id="login-error-1" style="display: none;">some error</p>
 </li>
</ul>

CSS

.text-input 
{ height:20px; line-height: 20px; padding: 6px 45px 6px 10px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border: 1px solid #f1f1f1; background:#f1f1f1 url(http://i48.tinypic.com/hweko4.png) 100% 0 no-repeat;}

.text-input.email { background-position:100% -37px;}
.text-input.password { background-position:100% -72px;}

.text-input:focus {box-shadow: 0 0 2px #CCCCCC inset; border: 1px solid #CCCCCC;}