JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/css/tether.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <a href="#tab-one" class="nav-link active" data-toggle="tab">
            Tab One
        </a>
  </li>
  <li class="nav-item" role="presentation">
    <a href="#tab-two" class="nav-link" data-toggle="tab">
            Tab Two
        </a>
  </li>
</ul>
<div class="tab-content">
  <div id="tab-one" class="tab-pane active" role="tabpanel">
    Tab One
  </div>
  <div id="tab-two" class="tab-pane" role="tabpanel">
    Tab Two
  </div>
</div>

JavaScript

$('.nav-link').mouseenter(function(e) {
    $(this).tab('show');
  });