JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-custom" role="navigation">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a href="#">Menu Samples</a>
        <ul class="dropdown-menu" id="all-menu">
          <li class="input-group">
            <input id="searchText" type="text" class="form-control col-sm-2" />
            <button>
              Search
            </button>
          </li>
          <li><a class="menu" sm="WS15" pm="WS" href="#">Java Spring Framework</a></li>
          <li><a class="menu" sm="WS15" pm="WS" href="#">Ruby on Rails</a></li>
          <li><a class="menu" sm="WS15" pm="WS" href="#">Scala Play</a></li>
          <li><a class="menu" sm="WS15" pm="WS" href="#">PHP Code Igniter</a></li>
          <li><a class="menu" sm="WS15" pm="WS" href="#">Pyhton Django Framework</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<div class="container">
  <div class="form-inline">
  </div>
</div>

CSS

/*
 You probably do not need to edit this at all.

 Add some SmartMenus required styles not covered in Bootstrap 3's default CSS.
 These are theme independent and should work with any Bootstrap 3 theme mod.
*/


/* sub menus arrows */

.navbar-nav .sub-arrow,
.navbar-nav .collapsible .sub-arrow {
  position: static;
  margin-top: 0;
  margin-right: 0;
  margin-left: 6px;
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px dashed transparent;
  border-bottom: 4px dashed transparent;
  border-left: 4px dashed transparent;
}

.navbar-fixed-bottom .sub-arrow {
  margin-top: -5px;
  border-top: 4px dashed transparent;
  border-bottom: 4px solid;
}

.navbar-nav ul .sub-arrow {
  position: absolute;
  right: 0;
  margin-top: 6px;
  margin-right: 15px;
  border-top: 4px dashed transparent;
  border-bottom: 4px dashed transparent;
  border-left: 4px solid;
}

.navbar-nav ul a.has-submenu {
  padding-right: 30px;
}


/* scrolling arrows for tall menus */

.navbar-nav span.scroll-up,
.navbar-nav span.scroll-down {
  position: absolute;
  display: none;
  visibility: hidden;
  height: 20px;
  overflow: hidden;
  text-align: center;
}

.navbar-nav span.scroll-up-arrow,
.navbar-nav span.scroll-down-arrow {
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-top: 7px dashed transparent;
  border-right: 7px dashed transparent;
  border-bottom: 7px solid;
  border-left: 7px dashed transparent;
}

.navbar-nav span.scroll-down-arrow {
  top: 6px;
  border-top: 7px solid;
  border-right: 7px dashed transparent;
  border-bottom: 7px dashed transparent;
  border-left: 7px dashed transparent;
}


/* add more indentation for 2+ level sub in collapsible mode - Bootstrap normally supports just 1 level sub menus */

.navbar-nav .collapsible ul .dropdown-menu > li > a,
.navbar-nav .collapsible ul .dropdown-menu .dropdown-header {
 ...

JavaScript

/*!
 * SmartMenus jQuery Plugin - v0.9.6 - March 27, 2014
 * http://www.smartmenus.org/
 *
 * Copyright 2014 Vasil Dinkov, Vadikom Web Ltd.
 * http://vadikom.com
 *
 * Licensed MIT
 */

(function($) {

  var menuTrees = [],
    IE = !!window.createPopup, // we need to detect it, unfortunately
    IElt9 = IE && !document.defaultView,
    IElt8 = IE && !document.querySelector,
    IE6 = IE && typeof document.documentElement.currentStyle.minWidth == 'undefined',
    mouse = false, // optimize for touch by default - we will detect for mouse input
    mouseDetectionEnabled = false;

  // Handle detection for mouse input (i.e. desktop browsers, tablets with a mouse, etc.)
  function initMouseDetection(disable) {
    if (!mouseDetectionEnabled && !disable) {
      // if we get two consecutive mousemoves within 2 pixels from each other and within 300ms, we assume a real mouse/cursor is present
      // in practice, this seems like impossible to trick unintentianally with a real mouse and a pretty safe detection on touch devices (even with older browsers that do not support touch events)
      var firstTime = true,
        lastMove = null;
      $(document).bind({
        'mousemove.smartmenus_mouse': function(e) {
          var thisMove = {
            x: e.pageX,
            y: e.pageY,
            timeStamp: new Date().getTime()
          };
          if (lastMove) {
            var deltaX = Math.abs(lastMove.x - thisMove.x),
              deltaY = Math.abs(lastMove.y - thisMove.y);
            if ((deltaX > 0 || deltaY > 0) && deltaX <= 2 && deltaY <= 2 && thisMove.timeStamp - lastMove.timeStamp <= 300) {
              mouse = true;
              // if this is the first check after page load, check if we are not over some item by chance and call the mouseenter handler if yes
              if (firstTime) {
                var $a = $(e.target).closest('a');
                if ($a.is('a')) {
                  $.each(menuTrees, function() {
                    if...