JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sick-input" id="anonymous_element_3">
    <label for="search-input">Type your question here</label>
    <input type="text" id="search-input" name="search_string" value="" tabindex="1">
</div>

CSS

.sick-input label {
font-size: 16px;
position: absolute;
left: 8px;
top: 6px;
cursor: text;
pointer-events: none;
color: #777;
}

.sick-input.populated label {
    display: none;
}
input {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
-webkit-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
font-size: 16px;
border: 1px solid #BFBFBF;
padding: 5px;
    width: 500px;
}
.sick-input.focused label {
    color: #ccc;
    transition: color .2s linear 0;
    -webkit-transition: color .2s linear 0;
    -moz-transition: color .2s linear 0;
}

JavaScript

$('#search-input').keyup(function() {
    if ($(this).val() === '') {
        $('.sick-input').removeClass('populated');
    } else {
        $('.sick-input').addClass('populated');
    }   
})
    
    $('#search-input').focus(function() {
    $('.sick-input').addClass('focused');
});

$('#search-input').blur(function() {
    $('.sick-input').removeClass('focused');
});