JSFiddle - React, Tailwind, and code Playground

by setbon

HTML

<nav class="top-bar">
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
    <h1><a href="/">Business</a></h1>
        </li>
    
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li class="divider"></li>
          <li><a href="our-petition-for-amendments.html">Our petition for amendments</a><li>
          <li class="divider"></li>
          <li><a href="why-the-amendment-important.html">Importance of amendment</a><li>  
          <li class="divider"></li>
          <li><a href="why-investors.html">Why Investors</a></li>
          <li class="divider"></li>
          <li><a href="definitions.html">Definitions</a></li>
          <li class="divider"></li>
          <li><a href="bibliography.html">Bibliography</a></li>
          <li class="divider"></li>
          <li><a href="contact.html">Contact</a></li>
          <li class="divider"></li>
          <li class="has-form"><a href="volunteer.html" class="button">Volunteer</a>
          </li>
        </ul>
      </section>
    </nav>