JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.3.0-rc-30.79/layout-default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.3.0-rc-30.79/jquery.layout.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="ui-layout-north">
    <div style="height: 200px;"></div>
</div>
<div class="ui-layout-center" style="overflow: auto">
   <div style="margin-bottom: 10px; height: 100px; background: #ffff00;">
    </div>
    <div id="tabs" style="height: 10px; overflow: auto">
        <ul>
            <li><a href="#tab_1">1</a></li>
            <li><a href="#tab_1">1</a></li>
            <li><a href="#tab_1">1</a></li>
            <li><a href="#tab_1">1</a></li>
            <li><a href="#tab_1">2</a></li>
            <li><a href="#tab_1">3</a></li>
            <li><a href="#tab_1">4</a></li>
            <li><a href="#tab_1">5</a></li>
            <li><a href="#tab_1">6</a></li>
            <li><a href="#tab_1">7</a></li>
            <li><a href="#tab_1">8</a></li>
            <li><a href="#tab_1">9</a></li>  
            <li><a href="#tab_1">10</a></li>
            <li><a href="#tab_1">11</a></li>
            <li><a href="#tab_1">12</a></li>
            <li><a href="#tab_1">13</a></li>
            <li><a href="#tab_1">14</a></li>
            <li><a href="#tab_1">15</a></li>
            <li><a href="#tab_1">16</a></li>
        </ul>
        <div id="tab_1" style="background: #00ffff; height: 100%"></div>
        </div>
    <div style="background: #ff0000; height: 20px;">footer</div>
</div>

JavaScript

$("body").layout({applyDefaultStyles: false, north__size: "20%", center__contentSelector: "#tabs"});
$("#tabs").tabs({active: 1}, {active: 2}, {active: 3});