JSFiddle - React, Tailwind, and code Playground

HTML

<div id="homeNav">
    <a href="#" id="retailNav">Retail</a>
    <a href="#" id="residentialNav">Retail</a>
    <div id="retailHalf"></div>
    <div id="residentialFull"></div>
    <div id="retailFull"></div>
</div>

CSS

#homeNav {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 0;
    margin: 32px auto 0 auto;
}

#retailNav,
#residentialNav,
#retailHalf,
#retailFull,
#residentialFull {
    height: 200px;
    position: absolute;
    top: 0;
    display: block;
}

#retailNav {
    width: 100px;
    left: 0;
    z-index: 5;
    text-indent: -99999em;
}

#residentialNav {
    width: 100px;
    right: 0;
    z-index: 4;
    text-indent: -99999em;
}

#retailHalf {
    width: 100px;
    left: 0;
    z-index: 3;
    background: #d80073;
}

#residentialFull {
    width: 200px;
    left: 0;
    z-index: 2;
    background: #4891dc;
}

#retailFull {
    width: 200px;
    left: 0;
    z-index: 1;
    background: #d80073;
}

JavaScript

$('#retailNav').bind({
    mouseenter: function() {
        $('#residentialFull').fadeOut('slow');
    },
    mouseleave: function() {
        $('#residentialFull').fadeIn('slow');
    }
});
$('#residentialNav').bind({
    mouseenter: function() {
        $('#retailHalf').fadeOut('slow');
    },
    mouseleave: function() {
        $('#retailHalf').fadeIn('slow');
    }
});