JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<link rel="stylesheet" href="https://rawgithub.com/twbs/bootstrap/master/dist/css/bootstrap.min.css">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
        <div class="brand"><a href="/miweb3-Exesight/" title=""><img src="http://www.loose-cannons.co.uk/images/links/exesight.jpg" /></a>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav pull-right">
        <li class="active">
          <a href="/miweb3-Exesight/commercial.ashx">
            <span>Commercial</span>
          </a>
        </li>
        <li>
          <a href="/miweb3-Exesight/family.ashx">
            <span>Family</span>
          </a>
        </li>
        <li>
          <a href="/miweb3-Exesight/about-us.ashx">
            <span>About us</span>
          </a>
        </li>
        <li>
          <a href="/miweb3-Exesight/news1.ashx">
            <span>News</span>
          </a>
        </li>
        <li>
          <a href="/miweb3-Exesight/book-now.ashx">
            <span>Book Now</span>
          </a>
        </li>
        <li>
          <a href="/miweb3-Exesight/why-choose-us.ashx">
            <span>Why Choose Us?</span>
          </a>
        </li>
        <li>
          <a href="/miweb3-Exesight/contact-us.ashx">
            <span>Contact us</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar-default {
  background: black;
}
.navbar-default .navbar-nav {
  background: black;
}
.navbar-default .navbar-nav li a {
  transition: background-color 400ms, color 400ms;
  padding-top: 45px;
}
.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:active, .navbar-default .navbar-nav li a:focus {
  background-color: #ca1b19;
  color: white;
}
.navbar-default .navbar-nav li.active a {
  background: black;
  color: #777;
}
.navbar-default .navbar-nav li.active a:hover, .navbar-default .navbar-nav li.active a:active, .navbar-default .navbar-nav li.active a:focus {
  background-color: #ca1b19;
  color: white;
}