JSFiddle - React, Tailwind, and code Playground

by Harm Zeinstra

HTML

<button id="change">Change </button>

<div id="container">
    <div id="box1">
        <p> Hello, this is text1 </p>
    </div>
    
    <div id="box2">    
        <p> Goodbye, this is text2 </p>
        
    </div>
</div>

CSS

#container {
    width: 200px;
    height:200px;
    position: relative;
}

#box1{
    width: 200px;
    height:200px;
    background-color:red;
    position: absolute;
    top:0;
    left:0;
}

#box2{
    width: 200px;
    height:200px;
    background-color:green;
    position: absolute;
    top:0;
    left:0;
}

JavaScript

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800);
    $('#box2').fadeIn(800);
});