JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<div class="box">
    click inside to unfade
</div>
click outside to fade

CSS

.box {
    border:1px solid black;
    width:100px;
    cursor:pointer;
}

.faded {
    opacity: .5;
    border: 1px solid grey;
}

JavaScript

(function(box, faded) {
    
    var elem = document.querySelector("."+box);
    var settings = { 
        elem: elem,
        classes: elem.className.split(" "),
        toggle: faded
    };    
    
    window.addEventListener("click", clickHandler, false);
    
    function clickHandler(e) {
        if (e.target !== elem) modifyClass.call(settings, false);
        if (e.target == elem) modifyClass.call(settings, true);
    }
    
    function modifyClass(bool) {
        var index = this.classes.indexOf(this.toggle);
        if (bool === true && index > -1) this.classes.splice(index, 1);
        if (bool === false && index < 0) this.classes.push(this.toggle);
        this.elem.className = this.classes.join(" ");
    }    
    
})("box", "faded");