JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<nav class="navbar navbar-inverse" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  <!--  <a class="navbar-brand collapse-menu" href="#" class="dropdown-toggle" data-toggle="dropdown">
  
          <img src="http://demov4.vermilionreporting.com/VermilionWeb/vrs4gui/images/corp-logo.png" class="vrs-logo">
        </a>
-->
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">

    <!-- Navbar Links -->
    <ul class="nav navbar-nav">
      <li class="dropdown menu-large">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <img src="http://demov4.vermilionreporting.com/VermilionWeb/vrs4gui/images/corp-logo.png" class="vrs-logo">

        </a>
        <ul class="dropdown-menu megamenu row" style="display: none;">
          <li style="display: flex;">
            <div class="thumbnail-box pink">
              <a href="#" class="">
              </a>
              <span class="glyphicon glyphicon-folder-open thumbnail-icon"></span>
              <span class="thumbnail-title">Tasks</span>
            </div>


            <div class="thumbnail-box2 blue">
              <a href="#" class="">
              </a>
              <span class="glyphicon glyphicon-folder-open thumbnail-icon"></span>
              <div class="thumbnail-menu">
                <span class="glyphicon glyphicon-chevron-down thumbnail-menu-icon"></span>
              </div>
              <span class="thumbnail-title">Tasks</span>
              <div class="thumbnail-pop-menu blue"...

CSS

/* Top Navbar*/

.navbar {
  border: 0px;
  border-bottom: 1px solid #fff;
  background-color: rgba(33, 29, 29, 0.95);
  border-radius: 0;
  margin-bottom: 0px;
  min-height: 40px;
  max-height: 40px;
}

.navbar-brand {
  height: 40px;
  width: 54px;
  padding: 10px 20px;
  border-right: 1px solid #fff;
}

.navbar-toggle {
  padding: 8px 8px;
  margin-top: 3px;
  margin-right: 8px;
  margin-bottom: 8px;
}


/* Side Navbar*/

.navbar2 {
  position: fixed;
  height: 100%;
  border: 0px;
  background-color: rgba(33, 29, 29, 0.95);
  border-radius: 0;
  right:0;
}

.vrs-logo {
  height: 20px;
}

.navbar-vermilion-title {
  color: #ffffff;
  font-size: 22px;
  font-family: 'Gill Sans MT', GillSansMT;
}

a.dropdown-toggle {
  padding: 10px 8px!important;
}
.thumbnail-box,
.thumbnail-box2 {
  width: 15%;
  height: 120px;
  border: 2px solid #fff;
  float: left;
  margin:0 1%;
}

.thumbnail-icon {
  text-align: center;
  padding-top: 30px;
}

.thumbnail-menu-icon {
  padding-top: 55px;
}

.thumbnail-menu {
  float: right;
  width: 20px;
  text-align: center;
  border-left: 1px solid #fff;
  height: 100%;
}

.thumbnail-menu .glyphicon {
  font-size: 12px!important;
}

.megamenu .thumbnail-box .glyphicon {
  font-size: 50px;
  width: 100%;
}

.megamenu .thumbnail-box2 .glyphicon {
  font-size: 50px;
  width: 80%;
}

.thumbnail-title {
  padding: 10px;
  font-family: century gothic;
  float: left;
}

.thumbnail-pop-menu {
  width: 200px;
  height: auto;
  border: 2px solid #fff;
  padding: 10px;
  position: relative;
  margin-top: -10px;
  margin-right: -10px;
  float: right;
}

.thumbnail-pop-menu .list {
  list-style: none;
  padding: 0;
  font-family: century gothic;
}

.pink {
  background-color: #FF006A;
}

.blue {
  background-color: #2e3f99;
}

.light-blue {
  background-color: #00bcd4;
}

.orange {
  background-color: #ff9800;
}

.gray {
  background-color: #9e9e9e;
}

.green {
  background-color: #4caf50;
}
.badge-notify {
  background: #C40030;
  position:...

JavaScript

// MegaMenu tile popups   
$('.thumbnail-menu-icon').click(function() {
  $('.thumbnail-pop-menu').toggle();
});

jQuery('.navbar2').hover(
  function() {
    console.log('mouse over');
    $(".navbar2").css("background", "#3E3E3D");
    //$('.menuSubItem').addClass('in');
    console.log('submenuitem show');
    return false;
  },
  function() {
    console.log('mouse out');
    $(".navbar2").css("background", "");
    SubMenuId();
    console.log('id from open item', $(this, '.collapse .in').attr('id'));
    $('.menuSubItem').removeClass('in');
    console.log('submenuitem hide');
    return false;
  }
);

// Dropdown MegaMenu Fade    

$(".dropdown").hover(
  function() {
    $('.dropdown-menu', this).stop().fadeIn("fast");
  },
  function() {
    $('.dropdown-menu', this).stop().fadeOut("fast");
  });