JSFiddle - React, Tailwind, and code Playground

HTML

<div id="message">Hello world!</div>

CSS

div {
    margin: 10px;
    padding: 10px;
    color: white;
    background-color: black;
}

JavaScript

var msg = document.getElementById( 'message' );
msg.style.opacity = 0;

function fadeIn() {
    if( msg.style.opacity < 1 ) {
        msg.style.opacity = parseFloat(msg.style.opacity) + 0.01;        
        setTimeout( fadeIn, 25 );
    }
}
        
function fadeOut() {
    if( msg.style.opacity > 0 ) {
        msg.style.opacity = parseFloat(msg.style.opacity) - 0.01;
        setTimeout( fadeOut, 25 );
    }
}        
        
fadeIn();

msg.onclick = function() { fadeOut(); }