JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<nav id="super_nav">
    <div class="wrapper">
        <ul>
            <li><a href="#" id="super_nav_action">Products</a> 
            </li>
            <li><a href="news_landing.php">News </a> 
            </li>
            <li><a href="market_landing.php">Market Sectors </a> 
            </li>
            <li><a href="showcase_landing.php">Showcase</a> 
            </li>
        </ul>
    </div>
</nav>
<div class="heyo">
    <ol class="level_one">
        <li data-menu="interior">
            <img src="http://placehold.it/300x300/eee/555">
             <h3>Interior</h3>

            <li data-menu="exterior">
                <img src="http://placehold.it/300x300/eee/555">
                 <h3>Exterior</h3>

                <li data-menu="featured">
                    <img src="http://placehold.it/300x300/eee/555">
                     <h3>Featured Lines</h3> 
                    <li><a href="product_landing.php"><img src="http://placehold.it/300x300/eee/555"> <h3>All Products</h3>    </a>

    </ol>
    <ol class="level_two" id="interior">
        <li><a href=""><img src="http://placehold.it/300x300/eee/555"> <h3>Wall Surface</h3></a>

            <li>
                <img src="http://placehold.it/300x300/eee/555">
                 <h3>Wall Recessed</h3>

                <li>
                    <img src="http://placehold.it/300x300/eee/555">
                     <h3>Inground</h3>

                    <li>
                        <img src="http://placehold.it/300x300/eee/555">
                         <h3>Floodlights</h3>

                        <li>
                            <img src="http://placehold.it/300x300/eee/555">
                             <h3>Ceiling</h3>

                            <li>
                                <img src="http://placehold.it/300x300/eee/555">
                                 <h3>Bollards</h3>

    </ol>
    <ol class="level_two hide" id="exterior">
        <li>
            <img...

CSS

.level_one {

    text-align: center;

    list-style: none outside;

    overflow: hidden;

    width: 100%;

    border-bottom: 1px solid #bababa;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-direction: normal;

    -moz-box-direction: normal;

    -webkit-box-orient: horizontal;

    -moz-box-orient: horizontal;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-flex-wrap: nowrap;

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;

    -webkit-box-pack: center;

    -moz-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-align-content: stretch;

    -ms-flex-line-pack: stretch;

    align-content: stretch;

    -webkit-box-align: stretch;

    -moz-box-align: stretch;

    -webkit-align-items: stretch;

    -ms-flex-align: stretch;

    align-items: stretch;

}

.level_one img {

    max-height: 200px;

}

.level_one h3 {

    margin: 0;

    font-family: montserratregular;

    font-size: 2.29068em;

    white-space: nowrap;

}

.level_one small {

    margin: 0;

    font-size: 0.75em;

    text-transform: uppercase;

    display: block;

    font-weight: 100;

    margin-top: -5px;

}

.level_one .selected {

    background: #343434;

    color: #fff;

}

.level_one .selected:hover {

    color: #fff;

}

.level_one li {

    border-left: 1px solid #bababa;

    padding: 0.55387em;

    padding-top: 0px;

    max-height: 275px;

    -webkit-box-ordinal-group: 1;

    -moz-box-ordinal-group: 1;

    -webkit-order: 0;

    -ms-flex-order: 0;

    order: 0;

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -webkit-flex: 1 1 auto;

    -ms-flex: 1 1 auto;

    flex: 1 1 auto;

    -webkit-align-self: auto;

    -ms-flex-item-align: auto;

    align-self: auto;

    cursor: pointer;

    width: 0;

}

.level_one li:first-child {

   ...

JavaScript

function sizing() {
		var currentHeight = $('.level_one li').outerHeight();
		var currentHeightIMG = $('.level_one li img').outerHeight();
		var math = currentHeight - currentHeightIMG;
		$('.level_two li').css({'height': currentHeight - math + 'px' });
		$('.heyo').css({'border-bottom': '1px solid #bababa'});
		$('.level_one').animate({position: 'relative','margin-top': '-' + currentHeightIMG + 'px'
		}, {duration: 300,complete: function () {}});
		$(this).siblings().removeClass("selected");
		$(this).addClass("selected", 10000, "easeOutBounce");
	}
	
   $(document).ready(function(){  
		$("#super_nav_action").click(function (event) {
		var currentHeight = $('.level_one li').outerHeight();
		var currentHeightIMG = $('.level_one li img').outerHeight();
		var math = currentHeight - currentHeightIMG;
		
        event.preventDefault();
        if ($(this).hasClass("isDown")) {
            $(".heyo").animate({'height': '0px'}, 200, "linear");
            $('.level_one').animate({'margin-top': '0px' });
            $('.level_one li').siblings().removeClass("selected");
            $('.heyo').css({'border-bottom': '1px solid #fff' });
            $('.level_one').removeClass("isAlsoDown");
            $(this).removeClass("isDown");
            } else {
            $(".heyo").animate({'height': +currentHeight + 2 + 'px'}, 200, "linear");
            $(this).addClass("isDown");
        }
        return false;
    });
    //	Show Level Two
    $(".level_one li").click(function () {
        var active_tab_selector = $(this).attr('data-menu');
        var actived_nav = $('.level_two');
        if ($('.level_one').hasClass("isAlsoDown")) {
            actived_nav.addClass('hide');
            actived_nav.hide().animate({'opacity': 1}, 150);
            $('#' + active_tab_selector).removeClass('hide');
            $('#' + active_tab_selector).show().animate({ 'opacity': 1  }, 150);
            } else {
            $('.level_one').addClass("isAlsoDown");
           ...