JSFiddle - React, Tailwind, and code Playground
by Amal Das
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div data-aga-g-r>
<div data-aga-g="4-6-4-5-6">
<span class="aga-in-text">
<input type="text"/>
<label>First Name</label>
</span>
</div>
<div data-aga-g="4-6-4-5-6">
<span class="aga-in-text">
<input type="text"/>
<label>Last Name</label>
</span>
</div>
</div>
<div data-aga-g-r>
<div data-aga-g="4-6-4-5-6">
<span class="aga-in-text">
<input type="text"/>
<label>Email</label>
</span>
</div>
<div data-aga-g="4-6-4-5-6">
<span class="aga-in-select">
<select>
<option value="0"></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<label>Select Any</label>
</span>
</div>
</div>
<div data-aga-g-r>
<div data-aga-g="4-6-8-10-12">
<span class="aga-in-text">
<textarea type="text"></textarea>
<label>Remarks</label>
</span>
</div>
</div>
<div data-aga-g-r>
<div data-aga-g="4-6-8-10-12">
<span class="aga-in-check">
<input id="checkbox1" type="checkbox"/>
<label for="checkbox1"><span></span>Schedule Showing</label>
</span>
</div>
</div>
<div data-aga-g-r>
<div data-aga-g="4-6-4-5-6">
<span class="aga-in-check">
<input id="radio1" name="test" type="radio"/>
<label for="radio1"><span></span>Morning</label>
</span>
</div>
<div data-aga-g="4-6-4-5-6">
<span class="aga-in-check">
<input id="radio2" name="test" type="radio"/>
<label for="radio2"><span></span>Evening</label>
</span>
</div>
</div>
<div data-aga-g-r>
<div data-aga-g="4-6-8-10-12" class="aga-text-right">
<a class="aga-color-1 aga-button">SUBMIT</a>
<a class="aga-color-1 aga-button aga-button-default">CANCEL</a>
</div>
</div>CSS
.aga-in-text,.aga-in-select,.aga-in-check{position: relative;font-size: 16px;z-index: 1;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;margin:20px 20px;max-width: 350px;}
.aga-in-check {
margin: 5px 20px;
}
.aga-in-text>input,.aga-in-text>textarea,.aga-in-select>select{position: relative;display: block;float: right;padding:15px;width: 100%;background-color:#ffffff;border: 2px solid #d0d1d0;-webkit-transition: background-color 0.25s, border-color 0.25s;transition: background-color 0.25s, border-color 0.25s;outline: none;}
.aga-in-text>input:focus,.aga-in-text.aga-filled>input,.aga-in-text>textarea:focus,.aga-in-text.aga-filled>textarea,.aga-in-select>select:focus,.aga-in-select.aga-filled>select{background-color: transparent;border-color: #a3d39c;outline: none;}
.aga-in-text>label,.aga-in-select>label{width: 100%;text-align: left;position: absolute;bottom: 100%;color: #696969;pointer-events: none;overflow: hidden;padding: 0 1.25em;-webkit-transform: translate3d(0, 3em, 0);transform: translate3d(0, 3em, 0);-webkit-transition: -webkit-transform 0.25s;transition: transform 0.25s;-webkit-transition-timing-function: ease-in-out;transition-timing-function: ease-in-out;padding: 15px;}
.aga-in-text>input:focus~label,.aga-in-text.aga-filled>input~label,.aga-in-text>textarea:focus~label,.aga-in-text.aga-filled>textarea~label,.aga-in-select>select:focus~label,.aga-in-select.aga-filled>select~label{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);padding: 0 15px 5px 15px;color:#a3d39c;}
.aga-in-text>textarea {
min-height: 140px;
}
.aga-in-text>input,.aga-in-select>select,.aga-in-text>textarea {
color: #777777;
font-size: 16px;
}
.aga-in-check input[type='radio']:checked + label > span:before{content: "";position: absolute;top: 50%;left: 50%;border: 4px solid #fff;transform: translate(-50%,-50%);transform-origin: 0% 100%;border-radius: 50%;}
.aga-in-check input[type='radio'] + label > span...JavaScript
$(function () {
$(document).on("focusout",".aga-in-text input,.aga-in-text textarea,.aga-in-select select", function() {
if ($(this).val().length == 0) {
$(this).parents(".aga-in-text,.aga-in-select").removeClass("aga-filled");
} else if ($(this).val().length > 0) {
$(this).parents(".aga-in-text,.aga-in-select").addClass("aga-filled");
}
if($(this).find('option:selected').val()==0){
$(this).parents(".aga-in-text,.aga-in-select").removeClass("aga-filled");
}
});
$(".aga-in-text input,.aga-in-text textarea").trigger("focusout");
});