JSFiddle - React, Tailwind, and code Playground

by PHPsycho

HTML

<div class="box">hey ho</div>

<button>Hey</button>

CSS

.box
{
    background: #d00;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px;

    width: 100px;
    opacity: 0;
    transition: opacity 2s ease-out;
    -webkit-transition: opacity 2s ease-out;
}

.box.box-visible
{
    opacity: 1;
}

JavaScript

$(function(){
    $('button').on('click',function(){
        $('.box').toggleClass('box-visible');
    });
    
    $('.box').addClass('box-visible');
});