JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" id="serach" class="search placeholder">
  <label>Søg efter en kontakt</label>
  <input tytpe="text" value="" name="q" class="text" />
  <input type="submit" value="rechercher" class="submit" />
</form>

CSS

label { display: block ; height: 20px; margin-bottom: -20px; }
input { margin-top: 20px; }

JavaScript

$(".placeholder input").focusin(function() {
  $(this).parent().find("label").animate({opacity:0.5}, "slow");
}).focusout(function() {
  $(this).parent().find("label").animate({opacity:1}, "slow");
}).keyup(function() {
  $(this).parent().find("label").css({
      display: $(this).attr("value").length ? "none" : "block" 
  });
});