JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-navigation" class="menu-top">
    <li class=""><a href="#">Home</a></li>
    <li class=""><a title="#brands" href="#">Brands</a></li>
    <li class=""><a title="#wardrobe" href="#">Wardrobe</a></li>
    <li class=""><a title="#interiors" href="#">Interiors</a></li>
    <li class=""><a href="#">Our Story</a></li>
</ul>

<section id="brands" class="tab-content hide">
    <div class="row">
        <div class="col-md-3">
            <h2>Brands</h2> Brands Stuff
        </div>

    </div>
</section>

<section id="wardrobe" class="tab-content hide">
    <div class="row">
        <div class="col-md-3">
            <h2>Baby</h2> Baby Stuff
        </div>
        <div class="col-md-3">
            <h2>Boy</h2> Boy Stuff
        </div>
        <div class="col-md-3">
            <h2>Girl</h2> Girl Stuff
        </div>
        <div class="col-md-3">
            <h2>Mumma + Mini</h2> Mumma + Mini Stuff
        </div>
    </div>
</section>

<section id="interiors" class="tab-content hide">
    <div class="row">
        <div class="col-md-3">
            <h2>Interiors</h2> Interior Stuff
        </div>
    </div>
</section>

CSS

.menu-tops > li > a {
    display: block;
}

.menu-top {
    *zoom: 1;
}

.menu-top:before,
.menu-top:after {
    display: table;
    content: "";
}

.menu-top:after {
    clear: both;
}

.tab-content {
    /*opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
}

.tab-content.active {
    display: block;
    padding: 100px 0 50px 0;
    opacity: 1;
}

.tab-content.hide {
    display: none;
}
.tab-content.show {
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.tab-content.active {
    opacity: 1;
}
.tab-content ul li {
    line-height: 22px;
}

.tab-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tab-content ul li a {
    text-decoration: none;
}

JavaScript

jQuery(document).ready(function($) {
    $('.menu-top > li > a').hover(
        function(e) {
        	var activeEle = $($(this).attr('title'));
            $('.tab-content').addClass('hide').removeClass('show active');
            activeEle.removeClass('hide').addClass('show');
            setTimeout(function() {
            	activeEle.addClass('active');
            }, 40);
            
        },
        function(e) {

        }
    );
});