JSFiddle - React, Tailwind, and code Playground

by andyw_

HTML

<div class="name"> <input type="text" class="input-name"></div>

CSS

.name {
    display: inline-block;
    padding: 10px;
}

.name.red {
    background: #f00;
}

JavaScript

(function() {
    var inputs = document.getElementsByClassName('input-name');
    if( !(inputs && inputs.length) ) return;
    
    function toggleRed(elem) {
        elem.classList.toggle('red');
    }
    
    for(var i=0; i < inputs.length; i++) {
        var input = inputs[i];
        
        // focus
        input.addEventListener('focus', function() {
             toggleRed(this.parentElement);
        });
        
        // blur
        input.addEventListener('blur', function() {
             toggleRed(this.parentElement);
        });
    }
})();