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://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<!-- first navbar with dropdown-menu -->
	<nav class="navbar bg-dark fixed-top navbar-expand-sm front">
	  <div class="collapse navbar-collapse">
	    <ul class="navbar-nav">
	      <li class="nav-item dropdown">
	        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
	        <div class="dropdown-menu">
	          <a class="dropdown-item" href="#"> 1 </a>
			      <a class="dropdown-item" href="#"> 2 </a>
	          <a class="dropdown-item" href="#"> 3 </a>
	          <a class="dropdown-item" href="#"> 4 </a>
	        </div>
	      </li>
	    </ul>
	  </div>
	</nav>
	
	
	<!-- second navbar with top offset -->
	<nav class="navbar bg-primary fixed-top navbar-expand-sm back" style="top:56px!important;">
	<p>hello world</p>
	</nav>

CSS

.front{
 z-index: 2000 !important; 
}
.back{
 z-index: -1 !important; 
}