JSFiddle - React, Tailwind, and code Playground

by vi161

HTML

<div class="navbar navbar-default navbar-static-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 class="dropdown menu-large">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>          
               <ul class="dropdown-menu megamenu row">
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Software</li>
                        <li><a href="#">Desktop</a></li>
                        <li class="disabled"><a href="#">Mobile</a></li>
                        <li><a href="#">Tablet</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Hardware</li>
                        <li><a href="#">Arduino</a></li>
                        <li><a href="#">Raspberry PI</a></li>
                        <li><a href="#">VoCore</a></li>
                        <li><a href="#">Banana PI</a></li>
                     </ul>
                  </li>
                  <li class="col-sm-3">
                     <ul>
                        <li class="dropdown-header">Nano-Tech</li>
                        <li><a href="#">AFM</a></li>
                        <li><a href="#">STM</a></li>
                        <li><a href="#">Nano-Tubes</a></li>
                        <li><a href="#">Nano-Wires</a></li>
                        <li><a href="#">Materials</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">A.I.</li>
                       ...

CSS

.navbar-default{
color: #fff;
background-color: #2F4F4F;
border-color: #000000;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #00A7E8;
}

@media (max-width: 768px) {
  
  .navbar-nav .open .dropdown-menu .dropdown-header{
	color:#fff;
  }
}