JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="navbar">
  <div class="nav-item">
    <a href="#">Item 1</a>
    <div class="nav-item sub">
      <a href="#">Sub Item 1</a>
    </div>
  </div>
  
  <div class="nav-item">
    <a href="#">Item 1</a>
    <div class="nav-item sub">
      <a href="#">Sub Item 1</a>
    </div>
  </div>
  
  <div class="nav-item">
    <a href="#">Item 1</a>
  </div>
</div>

CSS

body{
  font-family:arial, sans-serif;
  background:rgba(27,27,27,1);
  color:#fff;
  padding:none;
  margin:0 auto;
}

a{
  text-decoration:none;
  color:#fff;
}

#navbar{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-row:auto;
  justify-items:center;
  
  background:rgba(255,255,255,0.4);
}

.nav-item, .nav-item > a{
  display:grid;
  justify-self:center;
  text-align:center;
}