JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="toggle" value="toggle" />
<br />
<div id="classContainer">
    
    <div id = "class1">
        
    </div>
    <div id = "class2">
    </div>
</div>

CSS

#classContainer
{
    position: relative;
}

#class1, #class2
{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

#class1
{
    background-color: red;
    display: none;
}

#class2
{
    background-color: blue;
}

JavaScript

$("#toggle").click(function (){
    if ($("#class1").is(":visible")) {
        $("#class1").fadeOut();
        $("#class2").fadeIn();
    }
    else {
        $("#class1").fadeIn();
        $("#class2").fadeOut();
    }
 });