JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.6/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
<body ng-app="app" ng-controller="mainController">

        <div id="sidebarPrimary">
            
            <ul id="sidebarPrimaryNav">
               
                <li id="accountButton" class="navButton dropdown-button" data-activates="accountMenu" data-alignment="right" data-hover="true">
                
                    <a href="#" target="blank_">

                        <span class="fa fa-user-circle"></span>
                        
                        <div id="userIcon"></div>

                    </a>
                    
                    <ul id="accountMenu" class="dropdown-content">
                            
                        <li><a href="#"><span></span>Account Option 1</a></li>

                        <li><a href="#"><span></span>Account Option 2</a></li>

                        <li><a href="#"><span></span>Account Option 3</a></li>
                            
                    </ul>
                
                </li>
                
                <li id="homeButton" class="navButton active">
                  
                    <a href="#home">

                        <div class="navButtonContent">

                            <span class="fa fa-lg fa-home"></span>

                            <span class="navLinkTitle">Home</span>

                        </div>

                    </a>
                
                </li>
                
                <li id="paymentsButton" class="navButton" show-id="paymentsMenu">
                  
                    <a>

                        <div class="navButtonContent">

          ...

JavaScript

var app = angular.module('app', ['ngRoute']);
                                    
app.config(function($routeProvider) {
    $routeProvider
    
    .when('/', {
        templateUrl: 'index.html',
        controller: 'mainController'
    })
        
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })
    
    .when('/', {
        templateUrl: 'pages/newPayroll.html',
        controller: 'newPayrollController'
    })
    
    .when('/', {
        templateUrl: 'pages/employeesList.html',
        controller: 'employeesListController'
    })
})

app.controller('mainController', function($scope) {
    $scope.message = 'Main Controller Active';
})

app.controller('newPayrollController', function($scope) {
    $scope.message = 'Payroll - New Payroll Controller Active';
})

app.controller('indexController', function($scope) {
    $scope.message = 'Employees - Employees List Controller Active';
})