JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<form id="frm" action="check_login.php" method="post">
   <div class="input-group">
   <span class="input-group-addon"><i class="fa fa-user"></i></span>
      <input class="in_box1" name="username" type="text" 
         placeholder="Username" title="Enter Username or  Email" maxlength="20" 
         required/>
   </div>
   <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-key"></i></span>
      <input class="in_box2" name="password" type="password" placeholder="Password"
         title="Enter
         Password" maxlength="10" required/>
   </div>
</form>