JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body class="sb-skin">
  <nav class="navbar navbar-static-top" role="navigation">
    <div class="navbar-header">
    </div>
    <div id="navbar" class="navbar-collapse pull-left" aria-expanded="false">
      <ul class="nav navbar-nav sb-menu">
        <li>
          <a href="#">
            <span>Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Projects</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Invoices</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Reports</span>
          </a>
        </li>
        <li class="active">
          <a href="#">
            <span>Accounts</span>
          </a>
          <ul class="sub">
            <li class="active"><a href="#">Account Entry</a></li>
            <li><a href="#">Account Balance</a></li>
            <li><a href="#">Reports</a></li>
          </ul>
        </li>
        <li>
          <a href="#">
            <span>Clients</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Contacts</span>
          </a>
          <ul class="sub">
            <li><a href="#">Law Firms</a></li>
            <li><a href="#">Real Estate Agents</a></li>
            <li><a href="#">Insurance Companies</a></li>
            <li><a href="#">Body Corporates</a></li>
            <li><a href="#">Banks</a></li>
            <li><a href="#">Mortgage Brokers</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="sb-user pull-right">
      <ul class="nav">
        <li>
          <a href="#">
            <span>Settings</span>
          </a>
          <ul class="sub">
            <li><a href="#">Preferences</a></li>
            <li><a href="#">Fax...

CSS

.nav>li {
  position: initial;
}

.sb-skin .navbar a {
  color: #333333;
}

.sb-user>.nav>li>a {
  font-size: 13px;
  padding: 17px 10px;
}

.navbar {
  position: relative;
}

.navbar .sub {
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  padding: 0;
}

.sb-menu>li>a,
.nav li {
  display: inline-block;
}

.navbar li a:hover,
.navbar li a:active,
.navbar li a:focus {
  background: none;
}

.navbar .pull-right {
  font-size: 14px;
}
.sb-menu .sub li {
  padding: 10px 14px;
}

.sb-menu>li.active>a {
  background-color: #fbf9f4;
}

.sb-menu .sub>li.active>a {
  font-weight: 600;
}

.sb-menu .sub>li>a:hover {
  text-decoration: none;
}

.sb-menu li.active .sub {
  background: #fbf9f4;
  display: inline;
  padding: 0;
}