JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<div class="border-box">
<div class="row">
  <input class="text-field" typpe="text" name="username"/> 
  <input class="text-field" typpe="password" name="username"/> 
  <input class="btn-login"type="submit" value="Login"/>
</div>

</div>

CSS

.border-box{
  display:block;
  border:1px solid rgba(236, 236, 236, 0.86);
  margin:auto;
  height:400px;
  width:25%;  
  border-radius:5px;
  box-shadow:0 0 25px 3px rgba(239, 234, 234, 0.66);   
  
}
.text-field{
  display:inline-block;
  border:none;
  border-bottom:1.5px dashed #656565;
  width:100%;
  box-sizing:border-box;
  height:50px;
  padding:10px 20px 0px;
  color:#2d988e
  
}
.text-field:focus{
     outline: none;
    
   border-bottom:1.5px dashed #78d4cb;
  
}
.row{
  width:80%;
  margin:auto;
    
}
input:-webkit-autofill{
    -webkit-box-shadow: inset 0 0 0px 9999px white;
   -webkit-text-fill-color:#2d988e;
}

.btn-login{
  display:inline-block;
  background-color:#78d4cb;
  border:none;
  color:white;
  font-weight:bolder;
  border-radius:5px;
  padding:10px;
  margin-top:50px;
  width:100%;
}

.btn-login:hover{
  cursor:pointer;
}
.btn-login:focus{
  outline:none;
}