JSFiddle - React, Tailwind, and code Playground

by ankitap

HTML

<div id="tabs">
  <ul>
      <li><a href="#tabs-0">Level 1</a></li>
    <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">
      <br/>
      <br/>
    <ul>
         <li><a href="#tabs-0">Level 2</a></li>
    <li><a href="#tabs-4">Nunc tincidunt</a></li>
    <li><a href="#tabs-5">Proin dolor</a></li>
    <li><a href="#tabs-6">Aenean lacinia</a></li>
  </ul>
        <div id="tabs-4"> 
  </div>
     <div id="tabs-5"> 
  </div>
     <div id="tabs-6"> 
  </div>
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3"> 
  </div>
   
</div>

CSS

.ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important;  margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

JavaScript

$(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
    
    
      $( "#tabs-1" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs-1 li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
   $("#tabs a").select(function () {

                var sel = "";
                sel= $(this).text();
           
                console.log(sel);
               

            });

               
  });