JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<body>
    <navbar>
      <ul class="title-area">
        <!-- float this left -->
        <li>Sunt</li>
        <li>Beatae Vita</li>
      </ul>
      <p>Doleremquee laudantium otam Doloremque laudantium otam</p>
      <ul class="nav-items">
        <!-- float this right-->
        <li>Arhieto</li>
        <li>Aperam</li>
        <li>Totam</li>
        <li>Rem</li>
      </ul>
    </navbar>

    <nav>
      <ul class="title-area">
        <!-- float this left -->
        <li>Sunt</li>
        <li>Beatae Vita</li>
      </ul>
      Doleremquee laudantium otam Doloremque laudantium otam

      <ul class="nav-items">
        <!-- float this right-->
        <li>Arhieto</li>
        <li>Aperam</li>
        <li>Totam</li>
        <li>Rem</li>
      </ul>
    </nav>

    <script src="" async defer></script>
  </body>
</html>*

CSS

navbar {
  display: flex;
  justify-content: space-between;
  background-color: black;
  color: white;
  height: 40px;
}

li {
  display: inline-block;
  padding: 14px 16px;
}

nav {
  display: flex;
  justify-content: space-between;
  background-color: #444444;
  color: white;
  text-align: center;
  height: 90px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
}

li {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding: 14px 16px;
}