JSFiddle - React, Tailwind, and code Playground

by htmled

HTML

<form class="contact-form" action="" method="post" name="contact-form">
    <ul>
        <li>
            <input type="text" name="name" placeholder="NAME" class="test" />
        </li>
        <li>
            <input type="email" name="email" placeholder="EMAIL" />
        </li>
        <li>
            <textarea name="message" name="message" placeholder="MESSAGE"></textarea>
        </li>
        <li>
            <button class="submit" type="submit">Send</button>
        </li>
    </ul>
</form>

CSS

.selected {
    background: lightYellow;
}

JavaScript

$(function () {
    var $form = $(".contact-form"),
        selectedClass = "selected";

    $form.on("focus", "input, textarea", function () {
        $(this).closest("li")
            .addClass(selectedClass);
    });

    $form.on("blur", "input, textarea", function () {
        $(this).closest("li")
            .removeClass(selectedClass);
    });
});