JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar ">
  <div class="navbar-brand">
    
    <div class="navbar-burger burger" data-target="navMenubd-example">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navMenubd-example" class="navbar-menu">
    <div class="navbar-start">
      <a class="nav-item is-tab" [routerLink]="['/event']" >
        <span class="icon is-small"><i class="fa fa-music"></i></span>Events
      </a>
      <a class="nav-item is-tab" [routerLink]="['/venue']">
        <span class="icon is-small"><i class="fa fa-map-marker" aria-hidden="true"></i></span>Venues
      </a>
      <a class="nav-item is-tab" [routerLink]="['/performers']">
        <span class="icon is-small"><i class="fa fa-microphone"></i></span>Performers
      </a>
      <a class="nav-item is-tab">
        <span class="icon is-small"><i class="fa fa-question" aria-hidden="true"></i></span>Help
      </a>
      <a class="nav-item is-tab">
        <span class="icon is-small"><i class="fa fa-user-circle-o" aria-hidden="true"></i></span>Team
      </a>
    </div>
    <div class="navbar-end">
      <a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/hulasaikelam" target="_blank">
        <span class="icon" style="color: #55acee;">
          <i class="fa fa-twitter"></i>
        </span>
      </a>
      <span class="nav-item">
          <a class="button" [routerLink]="['/signIn']">
            Sign In
          </a>
          <a class="button" [routerLink]="['/signUp']">
            Sign Up
          </a>
      </span>
    </div>
  </div>
</nav>