JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<div class="container-fluid h-100 d-flex flex-column">
      
<nav class="navbar navbar-expand-sm s-navbar">
   <a class="brand navbar-brand" href="/">Brand</a>
   <button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
      <span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
   </button>
   <div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
      <ul class="navbar-nav mr-auto">
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
                  <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="/Device">Sub menu</a>
                  </div>
               </li>
         <li class="nav-item">
            <a class="nav-link" href="/Test">Test</a>
         </li>
      </ul>
   </div>
</nav>

<div class="row h-100">
  <main class="col d-felx flex-column" style="background-color: yellow"></main>
</div>

CSS

@media (max-width: 575.98px) {
  .s-user {
    display: none; } }
    
html, body {
  height: 100%;
}

.s-btn-hamburger {
  border-width: 1px;
  border-color: black;
}

.s-menu-content.show {
  border: 1px solid black;
}