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:hidden">
   <div style="margin-bottom: 10px; height: 100px; background: #ffff00;">
    </div>
    <div id="tabs" style="height: 100%; overflow: auto">
        <ul>
            <li><a href="#tab_1">1</a></li>
             <li><a href="#tab_2">1</a></li>
        </ul>
        <div id="tab_1" style="background: #00ffff; height: 100%"></div>
        </div>
                <div id="tab_2" style="background: #00ffff; height: 100%"></div>
        </div>
    <div style="background: #ff0000; height: 10px;">footer</div>
</div>
<div class="ui-layout-west">
	<iframe src="www.baidu.com" width="100%" height="40px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>
</div>

JavaScript

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