JSFiddle - React, Tailwind, and code Playground

by bdh92123

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div id="container">
    <div id="tab">
        <ul>
            <li><a href="#a">Name</a></li>
        </ul>
        <div id="a">Content</div>
    </div>

</div>
<span id="text"></span>

CSS

#container{
    position: absolute;
    width: 300px;
    height: 180px;
    left: 30%;
    top: 20%;
    overflow: hidden;
}

JavaScript

$(function(){
    var tab = $("#tab").tabs({
        heightStyle : "fill"
    }); 
    
    var str = "outerDiv height : "+$("#container").outerHeight() +"<br>";
    str += "innerTabs height : "+tab.outerHeight();
    $("#text").html(str);
 });