JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
        <!--Not sure about path of [routerLink]="['/login']" **make sure to check** -->
        <a class="nav-link dropdown-toggle" [routerLink]="['/login']" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          {{userName}}
        </a>
        <span class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <!--
              <a class="dropdown-item text-uppercase" href="">Profile</a>
              <a class="dropdown-item text-uppercase" href="">Settings</a>
          -->
        <a class="dropdown-item">Logout</a>
        </span>
      </li>
</ul>