JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://bootswatch.com/yeti/bootstrap.min.css">
<ul class="nav nav-pills">
    <li class="active"><a href="#">Regular link</a></li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" id="menu1">
        <li class="dropdown-submenu">
          <a href="#">More options</a>
          <ul class="dropdown-menu">
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
            <li><a href="#">Second level link</a></li>
          </ul>
        </li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
</ul>

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}