JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav nav-pills">
              <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://www.google.com">
          Dropdown
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>
      </li>
        </ul>

JavaScript

$(function(){
        jQuery('.dropdown-toggle').dropdown();
        jQuery('ul.nav li.dropdown').hover(
        function() {jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();},
        function() {jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();}
      );

        jQuery(".nav .dropdown-toggle").click(function () {
          return true;
        });
      });