JSFiddle - React, Tailwind, and code Playground

HTML

<nav>        
                <div class="link select-leisure inactive">
                    <a class="triangle-up leisuremenu" href=""><i class="fa fa-support"></i><span>Leisure</span></a>
                </div> 
                
                <div class="link select-corporate inactive">
                    <a class="triangle-up corporatemenu" href=""><i class="fa fa-users"></i><span>Corporate</span></a>
                </div> 
                
                <div class="link select-luxury active">
                    <a class="triangle-up luxurymenu" href=""><i class="fa fa-star"></i><span>Luxury</span></a>
                </div> 
                
                <div class="link select-vip inactive rotated">
                    <a class="triangle-up vipmenu" href=""><i class="fa fa-diamond"></i><span>VIP</span></a>
                </div> 
                
            </nav>


<!-- LEISURE Menu -->
<div class="top_nav2 leisure_menu">
    <div class="container">
             <ul>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul> 
    </div>   
</div>
<!-- end LEISURE Menu -->
<!-- CORPORATE Menu -->
<div class="top_nav2 corporate_menu">
    <div class="container">
             <ul>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul> 
    </div>     
</div>
<!-- end CORPORATE Menu -->
<!-- LUXURY Menu -->
<div class="top_nav2 luxury_menu show_menu">
    <div class="container">
             <ul>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul> 
    </div>    
</div>
<!-- end LUXURY Menu -->
<!-- VIP Menu -->
<div class="top_nav2 vip_menu">
    <div class="container">
             <ul>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
            </ul> 
    </div>   
</div>
<!-- end VIP Menu -->

CSS

/*---------------nav base colors-----------------*/
.select-vip .triangle-up{
	color: rgb(210,210,210);
	border-color: rgb(10,13,28) rgb(10,13,28) transparent transparent;
}
.select-luxury .triangle-up{
	color: rgb(255,212,145);
	border-color: rgb(94,21,21) rgb(94,21,21) transparent transparent;
}
.select-corporate .triangle-up{
	color: rgb(121,206,255);
	border-color: rgb(44,67,102) rgb(44,67,102) transparent transparent;
}
.select-leisure .triangle-up{
	color: rgb(78,255,193);
	border-color: rgb(10,101,54) rgb(10,101,54) transparent transparent;
}
/*---------------nav hover colors-----------------*/
.select-vip .triangle-up:hover{
	color: rgb(255,255,255);
	border-color: rgb(14,19,40) rgb(14,19,40) transparent transparent;
}
.select-luxury .triangle-up:hover{
	color: rgb(236,211,175);
	border-color: rgb(135,30,30) rgb(135,30,30) transparent transparent;
}
.select-corporate .triangle-up:hover{
	color: rgb(175,227,255);
	border-color: rgb(63,96,146) rgb(63,96,146) transparent transparent;
}
.select-leisure .triangle-up:hover{
	color: rgb(107,250,216);
	border-color: rgb(14,145,77) rgb(14,145,77) transparent transparent;
}
/*----------------nav changing----------------*/
.show_menu{
	display: block !important;
}
.leisure_menu,.corporate_menu,.luxury_menu,.vip_menu{
	display: none;
}

.leisure_menu.show_menu{
	background: rgba(14,145,77,0.9) !important;
	border-top: 1px solid rgb(78,255,193)
}
.corporate_menu.show_menu{
	background: rgba(63,96,146,0.9) !important;
	border-top: 1px solid rgb(121,206,255)
}
.luxury_menu.show_menu{
	background: rgba(135,30,30,0.9) !important;
	border-top: 1px solid rgb(255,212,145)
}
.vip_menu.show_menu{
	background: rgba(10,13,28,0.9) !important;
	border-top: 1px solid rgb(210,210,210)
}
.luxury_menu .topsocial li a{
	color: rgb(255,212,145)
}
.luxury_menu .topsocial li a:hover{
	color: rgb(236,211,175)
}
.vip_menu .topsocial li a{
	color: rgb(210,210,210)
}
nav {
	background:black;
    width:600px
}
.link {
  width: 100px;
  height:...

JavaScript

$('.leisuremenu').hover(function () {
            $('.leisure_menu').toggleClass('show_menu');
            $('.luxury_menu').toggleClass('show_menu');
        });
        $('.corporatemenu').hover(function () {
            $('.corporate_menu').toggleClass('show_menu');
            $('.luxury_menu').toggleClass('show_menu');
        });
        $('.vipmenu').hover(function () {
            $('.vip_menu').toggleClass('show_menu');
            $('.luxury_menu').toggleClass('show_menu');
        });


$('.vip_menu').hover(function () {
            $('.vip_menu').toggleClass('show_menu');
        });
        $('.corporate_menu').hover(function () {
            $('.corporate_menu').toggleClass('show_menu');
        });
        $('.leisure_menu').hover(function () {
            $('.leisure_menu').toggleClass('show_menu');
        });