JSFiddle - React, Tailwind, and code Playground

HTML

<label for="name">Name:</label><input type="text" id="name" autocomplete="off" name="name" maxlength="10" />
<button type="button" id="submit">Submit Name</button>

<br /><br />

<div id="nameLabel">Hello!</div>

CSS

body {
    font-family: Arial, sans-serif;
}
#name {
    border:1px solid #ADADAD;
    background:#EBEBEB;
    padding:5px;
    outline: none;
    margin-left: 20px;
}
#name:focus {
    border:1px solid black;
}
#nameLabel {
    font-weight:bold;
    display:none;
}

button { padding: 5px; }

label { cursor: pointer; }

JavaScript

$(document).ready(function() {
    $('#submit').click(function() {
        var name = $('#name').val();
        if (name.length < 1) {
            $('#nameLabel').css("color", "#FF003F").stop(true, true).fadeIn(700).html('Please enter your name.').delay(1500).fadeOut(700);
        }
        else {
            $('#nameLabel').css('color', 'black').stop(true, true).fadeIn(700).html('Hello there, ' + name + '!');
        }
    });
});