JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar" role="navigation">
  <div class="navbarLogoDiv">
    <a ui-sref="dashboard">
      <img alt="Home" src="../../assets/images/logo.png">
    </a>
  </div>
  <div class="navbarLinks">
    <ul>
      <li><a ui-sref="dashboard">LOBBY</a></li>
      <li><a ui-sref="upcoming">UPCOMING</a></li>
      <li><a ui-sref="history">HISTORY</a></li>
    </ul>
  </div>
  <div class="navbarLinksRight">
    <div class="navbarFunds">
      <button ui-sref="funds">ADD FUNDS</button>
    </div>
    <div class="navbarBalance">
      <h5><b>$875</b></h5>
      <p>BALANCE</p>
    </div>
    <div class="myDropdown navbarDropdown">
      <img src="../../assets/icons/user.png" alt="user profile">
      <ul>
        <li><a>Balance: <b>$875</b></a></li>
        <li><a ui-sref="funds">Add Funds</a></li>
        <li><a ui-sref="entries">My Entries</a></li>
        <li><a ui-sref="profile">Profile</a></li>
        <li><a ui-sref="referral">Refer Friends</a></li>
        <li><a ui-sref="trans">Transactions</a></li>
        <li><a ng-click="logOut()">Log Out</a></li>
      </ul>
    </div>
  </div>
</nav>

SCSS

h1, h2, h3, h4, h5, h6 {
  margin: 0px;
}

* {
  margin: 0;
  padding: 0;
}

a:link, a:hover, button:hover, button:link {
  text-decoration: none;
  cursor: pointer;
}

a:focus, .btn:focus, input {
  outline: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

ul {
  list-style: none;
}

// Layout Background Colors
$body-background-color:   #141f1f;
$page-background-color:   #ffffff;
$footer-background-color: #141f1f;

// Layout Breakpoints
$mobile-width:  "(min-width: 0px) and (max-width: 480px)";
$phablet-width: "(min-width: 481px) and (max-width: 767px)";
$tablet-width:  "(min-width: 768px) and (max-width: 1023px)";
$desktop-width: "(min-width: 1024px)";

// Design Colors
$base-primary-color:   #00aff2;
$base-secondary-color: #f4f4f4;
$base-tertiary-color:  #000000;

// Text Colors
$text-primary-color:    #5f5f5f;
$text-secondary-color:  #f4f4f4;
$text-tertiary-color:   #00aff2;
$text-quaternary-color: #000000;
$text-quinary-color:    #dfdfdf;

body {
  color: $text-primary-color;
  font-family: latoFont, Arial, Helvetica, sans-serif;
  background-color: $body-background-color;
}

a {
  color: $text-primary-color;
}

.navbar {
  margin-bottom: 0px !important;
  height: auto;
  border-bottom: 1px solid $base-primary-color;
  overflow: hidden;
  color: $text-secondary-color;
}

.navbarLogoDiv {
  float: left;
  margin-left: 5%;

  img {
    margin-top: 5px;
    height: 50px;
    padding: 0px 10px;
  }
}

.navbarLinks {
  ul {
    margin: 0;
    padding: 0;
  }

  li {
    float: left;
  }

  li a {
    display: inline-block;
    color: $text-secondary-color;
    padding: 25px 30px;
    text-align: center;
  }

  li a:hover {
    background: #737373;
  }
}

.navbarLinksRight {
  padding: 20px 5px;
}

.navbarBalance {
  float: right;
  padding: 0px 10px;

  h5 {
    text-align: center;
  }

  p {
    font-size: 8pt;
  }
}

.navbarFunds {
...