JSFiddle - React, Tailwind, and code Playground

by Jonathon Mascorella

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>This is the content of the first tab</p>
  </div>
  <div id="tabs-2">
    <p>This content will appear in the second tab</p>
  </div>
  <div id="tabs-3">
    <p>This content in the third</p>
    <p>And you can have as much content here as you want.</p>
  </div>
</div>

CSS

body {
  margin:30px;
}

JavaScript

$(function() {
    $( "#tabs" ).tabs();
  });