JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<div class="toggle">
    <div class="one">
        <p>This is div one!</p>       
    </div>
        
    <div class="two">
        <p>This is div two!</p>        
    </div>
</div>

CSS

.toggle {
    position:relative;
    width: 300px;
    height: 200px;
    background: #EEE;
}

.two, .one {
    position:absolute;
    width: 300px;
    height: 200px;
    top: 0;
    left: 0;
}

.two {
    background: #000;
    color: #FFF;
}

.one {
    background: #0CC;
    color: #000;
}

JavaScript

$("div.two").hide();
    $("div.toggle").hover(function() {
        $(this).children(".two").fadeIn("slow");    
    }, function() {
        $(this).children(".two").fadeOut("slow");    
});