JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

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>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li>
          <div class="navbar-nav-divider"></div>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="margin-bottom: 0;">
                            Some Stuff <span class="caret"></span>
                        </a>
          <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS

.dropdown .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
  -moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
  -ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
  -o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
  transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.dropdown.open .dropdown-menu {
  -webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  -o-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  transition: max-height 0.3s, opacity 0.2s, visibility 0s;
  max-height: 120px;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar-nav .dropdown-menu>li>a {
    padding: 5px 15px 5px 25px;
    color: #777;
  }
}