JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<body>
<div class='under'>
  <label class='overlap'></label>
</div>
<div class='zoom'>
  <label class='overlap'></label>
</div>
<br>
<label>Enter some text and remove focus</label>
<input class='temp' type="text">
<div id="test" class='zoom'>
  <p>
  fsdfsdf
  
  </p>
<div>

</div>
</div>
</body>

CSS

.overlap{
  position:absolute;
}
.zoom {
	width:20px;
  height:10px;
}

JavaScript

$(document).ready(function(){
    $(".temp").change(function(){
        $('.overlap').text($('.temp').val());
        $(".zoom").css({
         	"transition": "all 1s ease",
          "transform": "scale(2)",
          "opacity": "0"
        });
        setTimeout(function() {
            $(".zoom").removeAttr('style');
          }, 1000);
    });
});


$("#test").css({
         	"transition": "all 1s ease",
          "transform": "scale(2)",
          "opacity": "0"
        });