JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<form action="#" method="post">
    <fieldset>
        <legend>Simple demo</legend>
        <label for="name">Text Input:</label>
        <input type="text" name="name" id="name" value="" tabindex="1" />
    </fieldset>
</form>

CSS

form {
    border: 2px solid #000;
    padding: 1em;
}
form.hasInputChanged {
    border-color: limegreen;
}

JavaScript

function changeHandler(event) {
    var form = this,
        changed = event.target;

    form.classList.toggle('hasInputChanged', changed.value !== changed.defaultValue);

}

var formElement = document.querySelector('form');

formElement.addEventListener('change', changeHandler);