JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>

CSS

.test {
    width: 200px;
    height: 200px;
    margin-top: 50px;
    margin-bottom: 100px;
    background-color: yellow;
    opacity: 1;
}

JavaScript

var div = document.querySelector('.test');

	function show(elem, t) {
        elem.style.display = "block";
        elem.style.opacity = 0;
        var fadeEffect = setInterval(function () {
            if (elem.style.opacity >= 1) {
                clearInterval(fadeEffect);
            }

            elem.style.opacity = (+elem.style.opacity + 0.02).toFixed(2); //0.02
        }, t)
    }
    
    function hide(elem, t) {
        var fadeEffect = setInterval(function () {
            if (!elem.style.opacity) {
                elem.style.opacity = 1;
            }

            if (elem.style.opacity < 0.02) {
                clearInterval(fadeEffect);
                elem.style.display = "none";
            }

            elem.style.opacity -= 0.02;
        }, t)
    }
    
        div.onclick = function () {
        hide(this, 19);
    }