JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar main navbar-fixed">
    <div class="container">
        <ul>
            <li class="item active"><a href="#">Items 1</a>
                <ul>
                    <li class="item"><a href="#">Items 1</a></li>
                    <li class="item"><a href="#">Items 2</a></li>
                    <li class="item"><a href="#">Items 3</a></li>
                </ul>
            </li>
            <li class="item"><a href="#">Items 2</a></li>
            <li class="item"><a href="#">Items 3</a></li>
            <li class="item"><a href="#">Items 4</a>
                <ul>
                    <li class="item"><a href="#">Items 1</a></li>
                    <li class="item"><a href="#">Items 2</a></li>
                    <li class="item"><a href="#">Items 3</a></li>
                </ul>
            </li>
            <li class="item"><a href="#">Items 5</a></li>
            <li class="item"><a href="#">Items 6</a></li>
        </ul>
    </div>
</div>

CSS

ul {
    padding: 0;
    margin: 0;
}
.navbar {
  position: relative; }
  .navbar:before, .navbar:after {
    content: " ";
    display: table; }
  .navbar:after {
    clear: both; }

.navbar-fixed {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 999;
  margin-bottom: 0; }

.navbar.main {
  background-color: #16c1f3; }

    .navbar.main .container > ul li.item {
      display: inline-block; }
    .navbar.main .container > ul > li.item > a {
      color: #fff;
      padding: 0.25rem 1rem;
      display: block; }
      .navbar.main .container > ul > li.item > a:hover, .navbar.main .container > ul > li.item > a:focus {
        color: #2c6f97;
        text-decoration: none; }
    .navbar.main .container > ul > li.item:hover, .navbar.main .container > ul > li.item:focus, .navbar.main .container > ul > li.item.active {
      background-repeat: no-repeat;
      background-position: center 1.5rem;
      background-image:...