JSFiddle - React, Tailwind, and code Playground

by er1187

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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-static-top" role="navigation" style="margin-bottom: 0; background-color:rgb(124,132,138)">
    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html" style="color:rgb(255,255,255);">TESTING</a>

    </div>
    </nav>
<div class="collapse navbar-collapse"  data-toggle="collapse" >
<ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>


    </ul>
</div>
</nav>

CSS

a{
  color: white !important;
}

@media (max-width: 900px) {
    .navbar-header {
        float: none;
    }
    .icon-bar{
      background-color: white !important;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        color: white;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
      display:block !important;
  }
}