JSFiddle - React, Tailwind, and code Playground

by AdvanTiSS

HTML

<div id="MainMenu">
    <div id="MainMenuHeader">
        <ul id="MainMenuHeaderItems">
            <li id="MenuItemInsurance">
                <div id="Icon">СТРАХОВАНИЕ</div>
                <div id="text"></div>
                <div id="bottom">
                    <div class="arrow-down active"></div>
                </div>
            </li><li id="TravelTickets" class="active" onclick="">
                <div id="Icon">БИЛЕТЫ</div>
                <div id="text"></div>
                <div id="bottom">
                    <div class="arrow-down active"></div>
                </div>
            </li>
        </ul>
        
    </div>
    <div class="Clear"/>
    <div id="InsuranceSearchPanel" class="MainMenuPanel"></div>
    <div id="RailTicketsSearchPanel" class="MainMenuPanel"></div>
    <div id="AirTicketsSearchPanel" class="MainMenuPanel"></div>
</div>

CSS

*{
    box-sizing: border-box;
}

#MainMenu {
    width: 500px;
    height: 400px;
    border: 1px solid blue;
    box-sizing: border-box;
}

#MainMenuHeader ul {
    padding: 0 0 0 0;
    margin: 0 0 0 0;    
    text-decoration: none;
    list-style-type: none;
    overflow: auto;
}  

#MainMenuHeader ul li {
    display: inline-block;
    width: 33%;    
    height: auto;
   /* border: 1px solid black;  */ 
    text-align: center; 
    background-color:white;
}

#MainMenuHeader ul li:hover {
    background-color:white;
    color: #f39200;
}

#MainMenuHeader ul li.active {
    background-color:white;
    color: white;
}

#MainMenuHeader ul li bottom {
    background-color:white;
    color: white;
}

#MainMenuHeader ul li div.arrow-down {
    border-top: 20px solid white;
}

#MainMenuHeader ul li.active div.arrow-down {
    display:block;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;	
	border-top: 20px solid #F5AE44;
    margin-left: 20px;
}

#MainMenuHeader ul li div#Icon{
    height: 170px;
    padding-top: 140px;    
}

#MainMenuHeader ul li#MenuItemInsurance #Icon {
    background: url(http://ulula.webizon.ru/template/images/str-ico.jpg) center no-repeat;
}

#MainMenuHeader ul li#MenuItemInsurance:hover #Icon {
    background: url(http://ulula.webizon.ru/template/images/str-ico-hov.jpg) center no-repeat;
}

#MainMenuHeader ul li#MenuItemInsurance.active #Icon {
    background: url(http://ulula.webizon.ru/template/images/str-ico-act.jpg) center no-repeat  #F5AE44;
}

#MainMenuHeader ul li#TravelTickets #Icon{
    background: url(http://ulula.webizon.ru/template/images/avia-ico.jpg) center no-repeat;
}

#MainMenuHeader ul li#TravelTickets:hover #Icon{
    background: url(http://ulula.webizon.ru/template/images/avia-ico-hov.jpg) center no-repeat;
}

#MainMenuHeader ul li#TravelTickets.active #Icon{
    background: url(http://ulula.webizon.ru/template/images/avia-ico-act.jpg) center no-repeat #F5AE44;
}...

JavaScript

$( "#MainMenuHeader ul li" ).on( "click", function() {
  $( "#MainMenuHeader ul li.active" ).removeClass("active");
  $(this).addClass("active");
});