JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Navigation -->
<div id="gxcpl" class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand hidden-lg hidden-md" href="#">Living Ahimsa</a>
      <a class="hidden-sm hidden-xs" href="#">
        <img class="gxcpl-logo" src="assets/images/logo.png" />
      </a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="/">Home</a></li>
        <li class="dropdown">
          <a href="https://mail.google.com/mail/u/0/#inbox" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Homes</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Introduction</a></li>
            <li><a href="#">Innovation</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Future</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i> Bio Energy</a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">BIO Heating</a></li>
            <li><a href="#">BIO...

CSS

/* Navbar */
#gxcpl.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}
#gxcpl.navbar-default {
    font-size: 16px;
    background-color: rgba(26, 42, 58, 1);
    border-bottom-width: 0px;
}
#gxcpl.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(26, 42, 58, 1);
	transition: all 0.5s ease;
}
#gxcpl.navbar-default .navbar-nav>li>a:hover,
#gxcpl.navbar-default .navbar-nav>li>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(38, 64, 91, 1);
	transition: all 0.5s ease;
}
#gxcpl.navbar-default .navbar-nav>.active>a,
#gxcpl.navbar-default .navbar-nav>.active>a:hover,
#gxcpl.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(38, 64, 91, 1);
}
#gxcpl.navbar-default .navbar-toggle {
    border-color: #26405b;
}
#gxcpl.navbar-default .navbar-toggle:hover,
#gxcpl.navbar-default .navbar-toggle:focus {
    background-color: #26405b;
}
#gxcpl.navbar-default .navbar-toggle .icon-bar {
    background-color: #26405b;
}
#gxcpl.navbar-default .navbar-toggle:hover .icon-bar,
#gxcpl.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #1a2a3a;
}
.dropdown-menu {
	font-family: 'MyriadPro-Regular';
	background-color: #26405B;	
}
.dropdown-menu > li > a {
	color: #ffffff;
	transition: all 0.5s ease;
	padding: 6px 20px;
}
.dropdown-menu > li:hover > a, 
.dropdown-menu > li:active > a, 
.dropdown-menu > li:focus > a {
	background-color: #1A2A3A;
	color: #ffffff;
	transition: all 0.5s ease;
}
/* Navbar */
/* Navbar Icon and Rotate */
.fa-angle-down {
	color: #00A5D7;
}
.gxcpl-fa-rotate-45 {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* Navbar Icon and Rotate */

JavaScript

$("li.dropdown").hover(
  function () {
    $(this).find("i").addClass("gxcpl-fa-rotate-45");
  },
  function () {
    $(this).find("i").removeClass("gxcpl-fa-rotate-45");
  }
);