JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="box" tabindex="0">
    <input type="text" />
    <input type="text" />
</div>
<button>Apply</button>
<button>Cancel</button>

CSS

.box {
    width: 300px;
    height: 300px;
}

div {
    background-color: grey;
}

div.focussed, div:focus {
    background-color: blue;
}

JavaScript

var box = document.getElementsByClassName('box')[0];
var inputs = box.querySelectorAll('input');

Array.prototype.forEach.call(inputs, function (input) {
    input.addEventListener('focus', function () {
        box.classList.add('focussed');
    });
    
    input.addEventListener('blur', function () {
        box.classList.remove('focussed');
    });
});