JSFiddle - React, Tailwind, and code Playground

by Satinder singh

HTML

<div id="mainDiv">
<div id="divTestArea21" style="width: 50px; height: 50px; background-color: #89BC38;"></div>
        <div id="divTestArea22" style="width: 50px; height: 50px;  background-color: #C3D1DF;"></div>
        <div id="divTestArea23" style="width: 50px; height: 50px;  background-color: #9966FF;"></div>
<input type="button" onClick="ShowBoxes()" value="ShowBox" />
</div>

CSS

#mainDiv
{
    position:relative;
    top:10px;
    left:30px;
    
}
#divTestArea21
{
        position:relative;
    top:10px;
}

JavaScript

function ShowBoxes() {
             $("#divTestArea21").hide("fast");
             $("#divTestArea22").fadeIn("slow");
             $("#divTestArea23").fadeIn(2000);
         }