JSFiddle - React, Tailwind, and code Playground

by Soltuts Tutorial

HTML

<!DOCTYPE html>
<html>
<body style="text-align: center;">
    <h2>Soltuts.com</h2>
    <h2> Change input borders after filling data </h2>
    <form>
        <label> NAME</label>
        <input type="text" id="fname" name="fname" value="">
        <input type="submit" value="submit">
    </form>
</body>
</html>

JavaScript

var gfg = document.getElementById("fname");
          gfg.onchange = function (e) {
            if (gfg.value != '') {
                e.target.style.borderBottom = "3px dotted red";
            }
        };