JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="watermark" name="s" id="search" value="basic text" />

CSS

input {
    width: 350px;
    color: #888;
}
input:focus {
    color: black;   
}
input.focused {
    color: black;
}

JavaScript

$(document).delegate('input.watermark', 'focus', function() {
    $(this).addClass('focused')
}).delegate('input.watermark', 'blur', function() {
    $(this).removeClass('focused')
});