JSFiddle - React, Tailwind, and code Playground

by CodeMaverick

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script>
<div id="container"> 
    <div id="title"> 
      <h1>title bar</h1> 
    </div> 
    <div id="tabs"> 
        <ul>  
            <li><a href="#tabone">one</a></li>  
            <li><a href="#tabtwo">two</a></li>  
            <li><a href="#tabthree">three</a></li> 
        </ul>  
        <div id="tabone"> 
            content goes here
            <br><br><br><br>more stuff<br><br><br>more stuff<br><br>
        </div>    
        <div id="tabtwo"> 
             content goes here...
        </div> 
        <div id="tabthree"> 
             content goes here...
        </div> 
        <div id="linkBar">
            <span id="leftLink"><< left link</span>
            <span id="rightLink">right link >></span>
        </div>
    </div>
</div>

CSS

/* main page CSS */

body{ 
  width: 975px; 
  margin-left: auto;
  margin-right: auto; /* center */
  font: 62.5% "Lucida Grande", "Lucida Sans", "Arial", sans-serif;
}

/* specific objects */

#linkBar {
    display: none;
    margin: 10px auto;
}

#leftLink {
  float: left;
}

#rightLink {
  float: right;
}

/*
 * jQuery UI CSS Framework 1.8.13
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 80%; height: 100%; }


/*
 * jQuery UI CSS Framework 1.8.13
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 *...

JavaScript

$("#accordion").accordion({ header: "h3" });
  
var $tabs = $("#tabs"),
    $linkBar = $("#linkBar");
     
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();

$('#title').click(function() {
      
    $tabs.tabs('select', 0); 
    return false;
      
});