JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div id="outerTabs">
    <ul>
        <li><a href="#outer-tab-1">Outer Tab 1</a></li>
        <li><a href="#outer-tab-2">Outer Tab 2</a></li>
        <li><a href="#outer-tab-3">Outer Tab 3</a></li>
        <li><a href="#outer-tab-4">Outer Tab 4</a></li>
        <li><a href="#outer-tab-5">Outer Tab 5</a></li>
        <li><a href="#outer-tab-6">Outer Tab 6</a></li>
        <li><a href="#outer-tab-7">Outer Tab 7</a></li>
    </ul>
    <div id="outer-tab-1">
        <p>this is the outer tab 1 panel</p>
        <div id="inner-tabs-p1">
           <ul>
              <li><a href="#inner-tabs-1">Inner Tabs 1.1</a></li>
              <li><a href="#inner-tabs-2">Inner Tabs 1.2</a></li>
              <li><a href="#inner-tabs-3">Inner Tabs 1.3</a></li>
            </ul>        
            <div id="inner-tabs-1">
                <p>this is the inner tabs1 panel for outer tab 1</p>
            </div>        
            <div id="inner-tabs-2">
                <p>this is the inner tabs2 panel for outer tab 1</p>
            </div>           
            <div id="inner-tabs-3">
                <p>this is the inner tabs3 panel for outer tab 1</p>
            </div>           
        </div>
    </div>
    <div id="outer-tab-2">
        <p>this is the outer tab 2 panel</p>
        <div id="inner-tabs-p2">
           <ul>
              <li><a href="#inner-tabs-4">Inner Tabs 2.1</a></li>
              <li><a href="#inner-tabs-5">Inner Tabs 2.2</a></li>
              <li><a href="#inner-tabs-6">Inner Tabs 2.3</a></li>
            </ul>        
            <div id="inner-tabs-4">
                <p>this is the inner tabs1 panel for outer tab 2</p>
            </div>        
            <div id="inner-tabs-5">
                <p>this is the inner tabs2 panel for outer tab 2</p>
            </div>          ...

CSS

body{font-size:10px; padding:30px;}
p{padding:20px;}

JavaScript

$(document).ready(function(){
    $('#outerTabs, #inner-tabs-p1, #inner-tabs-p2').tabs();
});