JSFiddle - React, Tailwind, and code Playground

by B__D

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<header>
  <div class="container">
    <h3>Buttons</h3>
    <ul class="nav navbar">
      <ul class="list-inline">
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
      </ul>
    </ul>
  </div>

  <br />
  <div class="container">
    <h3>Tabs</h3>
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Submenu 1-1</a></li>
          <li><a href="#">Submenu 1-2</a></li>
          <li><a href="#">Submenu 1-3</a></li>                        
        </ul>
      </li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>

  <br />
  <div class="container">
    <h3>Pills</h3>
    <ul class="nav nav-pills">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
</header>

CSS

html {
    background-color: rgb(80, 115, 130);
}

header {
    padding-bottom: 20px;
}

body {
    background-color: inherit !important;
}

.navbar {
    margin: 0 !important;
    background-color: rgb(0, 90, 105) !important;
    border-color: rgb(80, 115, 130) !important;
    min-height: 40px;  
}

.navbar > li a {
    color: white;
    padding-top: 7px;
    padding-bottom: 7px;
}

.nav-tabs > li a {
    color: white;
    padding-top: 7px;
    padding-bottom: 7px;
}

.nav-pills > li a {
    color: white;
    padding-top: 7px;
    padding-bottom: 7px;
}

.navbar ul > li.active {
    font-weight: bold;
    border-bottom: 4px solid yellow;
}

.navbar ul > li:hover {
    background-color: rgb(0, 90, 105) !important;
    border-bottom: 4px solid red;
}

.navbar ul > li:focus {
    font-weight: bold;
    background-color: rgb(0, 90, 105) !important;
}