JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul class="dynamic">
  <li><a href="#">Sub item 1</a></li>
  <li><a href="#">Sub item 2</a></li>
  <li><a href="#">Sub item 3</a></li>
  <li><a href="#">Sub item 4</a></li>
  <li><a href="#">Sub item 5</a></li>
  <li><a href="#">Sub item 6</a></li>
  <li><a href="#">Sub item 7</a></li>
  <li><a href="#">Sub item 8</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>

CSS

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.nav > li {
  display: inline-block;
}
.nav a {
  padding: 5px 10px;
}
.dynamic {
  position: absolute;
  max-height: 80px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}