JSFiddle - React, Tailwind, and code Playground

by CHAITANYA K

HTML

<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/uniform/css/uniform.default.css">
<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/simple-line-icons/simple-line-icons.min.css">
<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/admin/layout/css/custom.css">
<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/admin/layout/css/themes/darkblue.css">
<link rel="stylesheet" href="http://www.keenthemes.com/preview/metronic/theme/assets/admin/layout/css/layout.css">
<script src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
<script src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<div class="hor-menu ">
				<ul class="nav navbar-nav" id="menu1">
					<li>
						<a href="<?php echo base_url();?>admin/dashboard">Dashboard</a>
					</li>
					<li class="menu-dropdown mega-menu-dropdown">
						<a data-hover="megamenu-dropdown" data-close-others="true" data-toggle="dropdown" href="javascript:;" class="dropdown-toggle">
						Categories <i class="fa fa-angle-down"></i>
						</a>
						<ul class="dropdown-menu" style="min-width: 710px">
							<li>
								<div class="mega-menu-content">
									<div class="row">
										<div class="col-md-4">
											<ul class="mega-menu-submenu">
												<li>
													<h3>Level...

JavaScript

$('#menu1').find('li').click(function(){
       //removing the previous selected menu state
       $('#menu1').find('li').removeClass('active');
        
        //is this element from the second level menu?
        if($(this).closest('ul').hasClass('mega-menu-submenu')){
             $(this).parents('li').addClass('active');
            
        //this is a parent element
        }else{
             $(this).addClass('active');
        }
    });