JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="nav-gradient">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="/domains/view/high-end-price" class="dropdown-toggle" data-toggle="dropdown">
              Menu with caret<i class="caret"></i></a>
            <ul class="dropdown-menu">
              <li>
                <a href="/domains/view/new-listings">
                  Sub Menu
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

CSS

@media (max-width: 767px) {
  .navbar-default .navbar-nav > li > a {
    background-color: #fff;
    color: #333333 !important;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus {
    color: #fff !important;
    background-color: #2d3335 !important;
  }
  .navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: #333333;
    border-bottom-color: #333333;
  }
  .navbar .nav li.dropdown > .dropdown-toggle:hover .caret,
  .navbar .nav li.dropdown > .dropdown-toggle:focus .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #2d3335;
  }
}