JSFiddle - React, Tailwind, and code Playground

by dsupreme

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand" href="/">HelloWorld</a>
    <ul class="nav navbar-nav">
      <div class="nav-item dropdown ">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">1<span class="caret"></span></a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>      
      <div class="nav-item dropdown ">
        <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              2
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>      
    </ul>
    <ul class="nav navbar-nav nav-item">
        <li class="nav-item"><a class="nav-link" href="">Test</a></li>
    </ul>
    <ul class="nav navbar-nav nav-item pull-xs-right">   
        <li class="nav-item"><a class="nav-link" href="">Logout </a></li>
    </ul>
</nav>
</body>

CSS

.nav ul, .dropdown {
  display: inline-block;
  margin-right: 10px;
}

.dropdown a {
  line-height: 40px;
}