JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="firstname" class="defaultText" title="First Name" />

CSS

input { margin: 10px; padding: 5px; }

.defaultTextActive { color: #000; }

JavaScript

$(".defaultText").focus(function(srcc) {

    if ($(this).val() == $(this)[0].title) {
        $(this).removeClass("defaultTextActive");
        $(this).css("border","solid red 3px");
        $(this).val("");
    }

});

$(".defaultText").blur(function() {

    if ($(this).val() == "") {
        $(this).addClass("defaultTextActive");
        $(this).val($(this)[0].title);
    }

});

$(".defaultText").blur();