JSFiddle - React, Tailwind, and code Playground

by redbmk

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 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 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 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 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...

JavaScript

$(".link").mouseenter(function () {
    var menuName = /\bselect-(\w+?)\b/.exec(this.className)[1];
    
    $(".link").removeClass("active rotated");
    $(this).addClass("active rotated");
    
    $(".menu").removeClass("show_menu");
    $("." + menuName + "_menu").addClass("show_menu");
});