JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<a class="test">Click to show box</a>
<div class="box"></div>

CSS

.test{
    cursor: default;
    cursor: pointer;
    
}
div.box {
    width: 100px;
    height: 100px;
    background: #0F0;
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

div.box.active {
    opacity: 1;
    width: 500px;
    background: #f00;
    transition: all .2s ease-out;
}

JavaScript

$('a.test').click(function() {
    $('div.box').toggleClass('active');
});