JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div class="fixed-top navbar navbar-light bg-light navbar-expand-md justify-content-center">
  <div class="container">
    <a class="navbar-brand" href="/"> Brand </a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">Home</a>
        </li>
        <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Categories </a>
          <ul class="dropdown-menu megamenu">
            <div class="container">
              <div class="row">
                <li class="col-md-3 dropdown-item">
                  <ul>
                    <li class="dropdown-header">Glyphicons</li>
                    <li><a href="#">Available glyphs</a>
                    </li>
                    <li class="disabled"><a href="#">How to use</a>
                    </li>
                    <li><a href="#">Examples</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Dropdowns</li>
                    <li><a href="#">Example</a>
                    </li>
                    <li><a href="#">Aligninment options</a>
                    </li>
                    <li><a href="#">Headers</a>
                    </li>
                    <li><a href="#">Disabled menu items</a>
                    </li>
                  </ul>
                </li>
                <li class="col-md-3 dropdown-item">
                  <ul>
                    <li class="dropdown-header">Button groups</li>
                    <li><a href="#">Basic example</a>
                    </li>
                    <li><a href="#">Button...

CSS

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 20px;
  width: 100%;
}

.megamenu > div > li > ul {
  padding: 0;
  margin: 0;
}

.megamenu > div > li > ul > li {
  list-style: none;
}

.megamenu > div > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}

.megamenu > div > li > ul > li > a:hover,
.megamenu > div > li > ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  color: #999999;
}

.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}

.megamenu .dropdown-header {
  color: #428bca;
  font-size: 18px;
}
.megamenu .container{
  background-color:#f4f4f4;
}

@media (max-width: 768px) {
  .megamenu {
    margin-left: 0;
    margin-right: 0;
  }
  .megamenu > li {
    margin-bottom: 30px;
  }
  .megamenu > li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #fff;
  }
}