JSFiddle - React, Tailwind, and code Playground

by Milos Maric

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
         <p>Sadrzaj taba 1</p>
    </div>
    <div id="tabs-2">
        <p>Sadrzaj taba 2</p>
        <div id="tabsunder">
              <ul>
            <li><a href="#tabsunder-1">Tab under 1</a></li>
            <li><a href="#tabsunder-2">Tab under 2</a></li>
            <li><a href="#tabsunder-3">Tab under 3</a></li>
        </ul>
        <div id="tabsunder-1">
              <p>Sadrzaj taba under 1</p>
        </div>
        <div id="tabsunder-2">
              <p>Sadrzaj taba under 2</p>
        </div>
        <div id="tabsunder-3">
             <p>Sadrzaj taba under 3</p>
        </div>
        </div>
       
    </div>
    <div id="tabs-3">
         <p>Sadrzaj taba 3</p>
    </div>
</div>

CSS

body {
   background-color: #eef;     
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

JavaScript

$( "#tabs" ).tabs();
$( "#tabsunder" ).tabs();