JSFiddle - React, Tailwind, and code Playground

by ConnorM

HTML

<button id="button">Click Me</button>
<h1 id="test" style="opacity:1;"><pre>fadeOut(this);</pre></h1>

CSS

h1{
    font-family:'helvetica';
    text-align:center;
    text-shadow:0px 0px 2px #fff;
    font-size:40px;
    padding-top:50px;
}

body{
    background:rgb(252, 236, 238);
}

JavaScript

(function(){
    
    var button = document.getElementById('button');
    button.addEventListener('click', function(){
        fadeOut();
    }, false);
    
    var fadeOut = function () {
        var element = document.getElementById('test');
        var timer = function () {
            window.setTimeout(function(){
                var opacity = element.style.opacity;
                if(opacity > 0) {
                    element.style.opacity = opacity - 0.1;
                    timer();
                }
                
            }, 100);        
        }
                              
        timer();
    };
})();