JSFiddle - React, Tailwind, and code Playground

by NagarajShet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="w-50 ml-auto mr-auto mt-5">
	<div class="form-group">
		<label for="fname" class="control-label">First Name</label>
    <input type="text" name="fname" class="form-control">
		
	</div>
	<div class="form-group">
		<label for="lname" class="control-label">Last Name</label>
    <input type="text" name="lname" class="form-control">
		
	</div>
</form>

CSS

.form-group {
  display:flex;
  height:55px;
}

.form-group input[type="text"]{
  border:0px;
  border-bottom:1px solid #e0e0e0;
  width: 100%;
  outline:0px;
  box-shadow:none;
  font-size:14px;
  left:0px;
}

.control-label {
    left: 0px;
    font-size: 14px;
    font-weight: 400;
    pointer-events: none;
    position: absolute;
    transform: translate3d(0, 35px, 0) ;
    transform-origin: left top;
    transition: 240ms;
}

.form-group.focused .control-label {
  font-size:12px;
    color: #4d4d4d;
    transform:  translate3d(0, 20px, 0);
}

.form-control {
    align-self: flex-end;
}

.form-control::-webkit-input-placeholder {
    color: transparent;
    transition: 240ms;
}

.form-control:focus::-webkit-input-placeholder {
    transition: none;
}

.form-group.focused .form-control::-webkit-input-placeholder {
    color: #bbb;
}

JavaScript

$('.form-control').on('focus blur', function (e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');