JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.13/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>
            </ul>

            <div id="tabs-1">
            Tab 1 Content
            </div>

            <div id="tabs-2">
            Tab 2 Content
            </div>

            </div>


            <div id="sidebar">

            <div id="tabs1show" style="display:block">This is "#sidebar tabs1show ... 1</div>
            <div id="tabs2show" style="display:none">This is "#sidebar tabs2show"... 2</div>
            </div>

CSS

body {
    font-size: 11pt;
}

div.tab {
    border-bottom: 2px solid #aaa;
    padding: 8px 3px;
}

.tab h3 {
    font-size: 1.5em;
}

.tab p {
    font-size: 1.0em;
}

JavaScript

$(function() {
    $( "#tabs" ).tabs({
        select: function(event, ui) {  
   
            if(ui.tab.text == "tab 2") {
                $("#tabs1show").hide();
                $("#tabs2show").show();
            }
         
            if(ui.tab.text == "tab 1") {
                $("#tabs2show").hide();
                $("#tabs1show").show();
            }   
        }});  
  
   
});