JSFiddle - React, Tailwind, and code Playground

by nabeezy

HTML

input: <input id="testInput"onkeyup="myFunction()"/>

<div id="blueBox"> a box </div>

CSS

div{
    background-color:blue;
    width:200px;
    height:200px;
}
.active{
    background-color: red;
}
.inactive{
    background-color: green;
}

JavaScript

function myFunction() {
    var theInput = document.getElementById('testInput');
    var blueBox = document.getElementById('blueBox');
    if (theInput.value != ''){
        blueBox.className = "inactive";
    }else{
        blueBox.className = "active";
    }
}