JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div class="nav-main">
  <div class="nav-item"><a class="nav-item-a" href="#">Item</a></div>
  
  <div class="nav-item">
    <a class="nav-item-a" href="#">Item</a>
    <!-- NAV CHILD  -->
    <div class="nav-item-child">  
      <div class="nav-item"><a class="nav-item-a" href="#">Item</a></div>
      <div class="nav-item"><a class="nav-item-a" href="#">Item</a></div>
      <div class="nav-item"><a class="nav-item-a" href="#">Item</a></div>
      <div class="nav-item"><a class="nav-item-a" href="#">Item</a></div>
    </div>
  </div>
  
  <div class="nav-item"><a class="nav-item-a" href="#">Item</a></div>
</div>

CSS

.nav-main {
  display: grid;
  grid-template-columns: 5em 5em 5em;
  justify-content:center;
}

.nav-item {
  
}

.nav-item-a {
  background:rgba(0,0,0,.7);
  padding:1em;
}

.nav-item-child {
  display: grid;
  grid-template-rows: ;
}