JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div class="form-main">
  <input type="text" class="form-control form-style" id="address" placeholder="ADDRESS">
  <span class="underline"></span>
</div>

CSS

.form-main {position: relative;}
.form-style {background-color: transparent;border: none;color: #666;font-size: 18px;height: 50px;line-height: 50px;width: 100%;}
.form-style, .form-style:focus {border: 0;border-bottom: solid 1px #666;border-radius: 0;box-shadow: 0 0px 0px transparent;outline:none;}
input::-webkit-input-placeholder {color: #666;}
input:focus::-webkit-input-placeholder {color: #10789f;}
.form-style:focus+.underline {transform: scale(1);}
.underline {background-color: #10789f;display: inline-block;height: 2px;left: 0px;position: absolute;top: 51px;-webkit-transform: scale(0, 1);transform: scale(0, 1);-webkit-transition: all 0.5s linear;transition: all 0.5s linear;width: 100%;padding: 0;}