JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css">
<link rel="stylesheet" href="http://bootswatch.com/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootswatch.com/assets/css/bootswatch.min.css">
<div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="./">Bootswatch</a>
          <button data-target="#navbar-main" data-toggle="collapse" type="button" class="navbar-toggle">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar-main" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a id="themes" href="#" data-toggle="dropdown" class="dropdown-toggle">Themes <span class="caret"></span></a>
              <ul aria-labelledby="themes" class="dropdown-menu">
                <li><a href="./default/">Default</a></li>
                <li class="divider"></li>
                <li><a href="./amelia/">Amelia</a></li>
                <li><a href="./cerulean/">Cerulean</a></li>
                <li><a href="./cosmo/">Cosmo</a></li>
                <li><a href="./cyborg/">Cyborg</a></li>
                <li><a href="./darkly/">Darkly</a></li>
                <li><a href="./flatly/">Flatly</a></li>
                <li><a href="./journal/">Journal</a></li>
                <li><a href="./lumen/">Lumen</a></li>
                <li><a href="./readable/">Readable</a></li>
                <li><a href="./simplex/">Simplex</a></li>
                <li><a href="./slate/">Slate</a></li>
                <li><a href="./spacelab/">Spacelab</a></li>
                <li><a href="./superhero/">Superhero</a></li>
                <li><a href="./united/">United</a></li>
                <li><a href="./yeti/">Yeti</a></li>
       ...

JavaScript

$(".dropdown").hover(function () {
    $(this).addClass("open");
}, function() {
    $(this).removeClass("open");
});