JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
 <div class="container-fluid">

   <nav class="navbar navbar-dark navbar-expand-lg fixed-bottom navigation">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#primaryNavWrapper" aria-controls="primaryNavWrapper" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="primaryNavWrapper">
       <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
         <li class="nav-item">
           <a class="nav-link" href="">
             Home
           </a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="fetchdata">
             Tank Farm
           </a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="batchqueue">
             Batch Queue
           </a>
         </li>
       </ul>
     </div>
   </nav>
 </div>

CSS

html,
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: #292929;
  color: #e1e1e1;
  font-size: 12px !important;
}

.navbar {
  padding-top: 0;
  padding-bottom: 0;
}

.nav-item {
  color: #999;
  border-left: 2px solid #292929;
  transition: all 0.75s ease-out;
}

.nav-item a {
  color: #999 !important;
}

@keyframes nav-hover {
  0% {
    color: #999 !important;
  }
  
  8% {
    color: black !important;
    background-color: #ababab;
  }
  
  15% {
    color: #000000 !important;
    background-color: rgba(255, 255, 255, .6);
  }
  
  25% {
   color: #565656 !important; 
  }
  
  100% {
    color: #e1e1e1 !imporant;
  }
}

.nav-item:hover {
  color: #e1e1e1;
  background-color: rgba(255, 255, 255, .1);
  animation: nav-hover .75s 0s;
}

.btn-link {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.navigation {
  background-color: #383838;
}

.navigation-badge {
  height: inherit;
  display: block;
  width: 200px;
  margin-left: -5.1%;
  transform: rotate(-45deg) translate(10px, -47%);
  box-shadow: rgba(0, 0, 0, .4) 0 1px 8px 1px;
}

.navigation-badge .badge-label {
  display: block;
  position: fixed;
  top: 75%;
  color: #121212;
  font-size: x-small;
  text-transform: uppercase;
  transform: translateY(70%) translateX(200%);
}

.app {
  display: flex;
  flex-direction: column;
}

.top-row {
  height: 8.5rem;
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, .4) 0 1px 8px 1px;
  background-color: #383838;
  overflow: hidden;
}

.main {
  flex: 1;
}

.main .top-row {
  justify-content: flex-end;
  font-size: 1.85rem;
}

.main .top-row .page-title {
  text-transform: uppercase;
}

.main .top-row>a,
.main .top-row .btn-link {
  white-space: nowrap;
  margin-left: 1.5rem;
}

.main .top-row a:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar {
  background-image: linear-gradient(180deg, #052767 0%, #3a0647 70%);
}

.sidebar .top-row {
 ...