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>
<span class="aga-in-text">
  <input type="text" value="John"/>
  <label>Username</label>
</span>

<span class="aga-in-text">
  <textarea type="text"></textarea>
  <label>Remarks</label>
</span>

<span class="aga-in-check">
  <input id="checkbox1" type="checkbox" checked/>
  <label for="checkbox1"><span></span>Test</label>
</span>

<span class="aga-in-check">
  <input id="radio1" name="test" type="radio"/>
  <label for="radio1"><span></span>Test 1</label>
</span>
<span class="aga-in-check">
  <input id="radio2" name="test" type="radio"/>
  <label for="radio2"><span></span>Test 2</label>
</span>

<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>

CSS

.aga-in-text,.aga-in-select{position: relative;font-size: 16px;z-index: 1;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;margin:30px 20px;max-width: 350px;}
.aga-in-text>input,.aga-in-text>textarea,.aga-in-select>select{position: relative;display: block;float: right;padding:15px;width: 100%;background-color: #d0d1d0;border: 2px solid transparent;-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-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 {border-radius: 50% !important;}
.aga-in-check input[type='radio']:checked + label > span{border: .6em solid #a3d39c;}
.aga-in-check input[type='checkbox']:checked + label > span:before {content:...

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");
});