JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
            <ul>
                <li><a href="#tabs-1">Overview</a>
                
<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right">
        <img src="http://bonta.co.uk/test/test_img.jpg" />
    </div>
</div>
<div id="tabs-1">
         <p> first</p> 

</div>
       
<div id="tabs-2">
         <p> first</p> 

</div>
<div id="tabs-3">
         <p> first</p> 

</div>
       </li>
                
                <li><a href="#tabs-2">Discussion</a></li>
                <li><a href="#tabs-3">Administration</a></li>
            </ul>
</div>

CSS

html, body {
    width  : 100%;
    height : 100%;
}
#container {
    width      : 100%;
    height     : 100%;
    position   : relative;
    background : black;
}
#left {
    position : absolute;
    left     : 0px;
    top      : 0px;
    width    : 200px;
    height   : 100%;
}
#middle {
    position   : absolute;
    left       : 200px;
    top        : 0px;
    width      : 500px;
    height     : 100%;
    background : blue;
}
#right {
    position   : absolute;
    left       : 700px;
    top        : 0px;
    right      : 0px;
    height     : 100%;
    background : red;
    overflow   : hidden;
}
#right > img {
    width  : 100%;
    height : auto;
    border : none;
}

JavaScript

$('#tabs').tabs();