JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<script src="https://tympanus.net/Development/TextInputEffects/img/search.svg"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<span class="aga-in-search">
  <input type="text"/>
  <label>
    <span>Search</span>
  </label>
</span>

CSS

body{background: #e8e8e8;}
.aga-in-search {
  position: relative;
    z-index: 1;
    display: inline-block;
    margin: 1em;
    max-width: 350px;
    width: calc(100% - 2em);
    vertical-align: top;
	overflow: hidden;
	background: #CBCBCB;
}

.aga-in-search>input {
	width: 100%;
	background: transparent;
	color: #797693;
	z-index: 10;
  font-size: 16px;
	font-weight: 500;
      position: relative;
    display: block;
    float: right;
    padding:20px;
    border: none;
    border-radius: 0;
    font-weight: 400;
    font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none;
        box-sizing: border-box;
}
.aga-in-search>input:focus{outline: none;}
.aga-in-search>label {
	position: absolute;
	width: 100%;
	text-align: left;
	pointer-events: none;
	color: #fff;
}

.aga-in-search>label::before {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	top: calc(50% - 6px);
	left: 20px;
	background: url(https://tympanus.net/Development/TextInputEffects/img/search.svg) no-repeat center center;
	background-size: 100%;
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1);
	transition: transform 0.4s cubic-bezier(0.7,0,0.3,1);
}

.aga-in-search>label>span {
	display: block;
	padding: 18px 0 0 58px;
      font-size: 20px;
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1);
	transition: transform 0.4s cubic-bezier(0.7,0,0.3,1);
}

.aga-in-search>input:focus + label::before,.aga-in-search.aga-filled>label::before{
	-webkit-transform: scale3d(38, 38, 1);
	transform: scale3d(38, 38, 1);
}

JavaScript

$(function () {
$(document).on("focusout",".aga-in-search input", function() {
  if ($(this).val().length == 0) {
    $(this).parents(".aga-in-search").removeClass("aga-filled");
  } else if ($(this).val().length > 0) {
    $(this).parents(".aga-in-search").addClass("aga-filled");
  }
});
$(".aga-in-search input").trigger("focusout");
});