JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body class="DayMode">
  <div style="text-align: center; background-color: darkgreen;">
    <img alt="" height="110px" src="Content\NewerIntranetBanner.jpg" style="margin: 0 auto;" />
  </div>
  <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Interactive</a>
            <ul class="dropdown-menu multi-column columns-2 inverse-dropdown">
              <div class="row">
                <div class="col-sm-6">
                  <ul class="multi-column-dropdown inverse-dropdown">
                    <li><a target="_blank" href="#">stuff</a></li>
                    <li><a target="_blank" href="#"> Search</a></li>
                    <li><a target="_blank" href="#"> Request<br />Change Order</a></li>
                    <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown">stuff</a>
                      <ul class="dropdown-menu inverse-dropdown">
                        <li><a target="_blank" href="#"> Tool</a></li>
                        <li><a target="_blank"...

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> .dropdown-menu > li.menu > a {
    padding-left: 5px;
  }
  
  .dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
  }
  
  .dropdown-submenu > a:after {
    border-color: transparent transparent transparent lightgray;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
    display: block;
    float: right;
    height: 0;
    margin-right: -10px;
    margin-top: 5px;
    width: 0;
  }
  
  .dropdown-submenu:hover > a:after {
    border-left-color: #555;
  }
  
  .dropdown-menu > li > a:hover,
  .dropdown-menu > .active > a:hover {
    text-decoration: none;
  }
  
  @media (max-width: 767px) {
    .navbar-nav {
      display: inline;
    }
    .navbar-default .navbar-brand {
      display: inline;
    }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: #fff;
    }
    .navbar-default .navbar-nav .dropdown-menu > li > a {
      color: red;
      background-color: #ccc;
      border-radius: 4px;
      margin-top: 2px;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
      color: #333;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
      background-color: lightgray;
    }
    .navbar-nav .open .dropdown-menu {
      border-bottom: 1px solid white;
      border-radius: 0;
    }
    .dropdown-menu {
      padding-left: 10px;
    }
    .dropdown-menu .dropdown-menu {
      padding-left: 20px;
    }
   ...