JSFiddle - React, Tailwind, and code Playground

by Rahul Patel

HTML

<div class="group ">
						<input type="text" required="" class="module-input" />
						<label >Name</label>
					</div>

CSS

.module-input 	{font-size:14px;padding-top:12px;display:block;width:97%;border:none;border-bottom:1px solid #94a3a9;background-color:transparent;color:#5a686d;
margin-bottom:2%;}
input:focus{ outline:none; }
.group{    position: relative;
    margin-bottom: 25px;}
/* LABEL */
label {color:#94a3a9; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:0.5%;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-8px;
  font-size:12px;
  color:#94a3a9;

}