JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<div ng-app="Dashboard">
  <div id="dashboard" ng-controller="dashboardCtrl">
    <div ng-view class="app-nav">
      <button onclick="location.href = '/';">Dashboard</button>
    </div>
    <br>
    <div ng-view class="app-nav">
      <button onclick="location.href = 'Applications';">Healthchecks</button>
    </div>
    <br>
    <div ng-view class="app-nav">
      <button>Contact US</button>
    </div>
    <br>
  </div>
</div>

CSS

#dashboard {
  margin-top: 50px;
}

.app-nav {
  max-width: 350px;
  min-height: 75px !important;
  margin: 0 auto;
}

.app-nav button:hover {
  background-color: #154995;
}

.app-nav button {
  min-width: 350px;
  min-height: 75px;
}

button.ng-enter {
  transition: 3s ease all;
  opacity: 0;
}

button.ng-enter.ng-enter-active {
  opacity: 2;
}

JavaScript

angular.module('Dashboard', ['ngAnimate'])
  .controller('dashboardCtrl', function ($scope) {

  });