JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="search">Search this site</label>
    <input type="text" id="search" placeholder="Search this site" />
</div>

CSS

body { padding: 20px; }

div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }

JavaScript

$('input').on('keydown keypress keyup', function(e) {
    if($('input').val() == '') {
        $('div').removeClass('populated');
    }
    else {
        $('div').addClass('populated');
    }
});