JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<div id="container">
        <div id="header">                
                <form>
                    <ul>
                        <li><a href="#">Peter</a></li>
                        <li><a href="#">Tom</a></li>   
                        <li><a href="#">Sam</a></li>
                    </ul>                      
                </form>
        </div>
</div>
<div id="MainContainerPanel">
            <div id="LeftPanel" style="border: 2px solid gray; width: 190px; padding: 5px;">
                
            </div>
            <div id="CenterPanel">
                
            </div>
            <div id="RightPanel">
                
            </div>
            <div id="adsPanel"/>
        </div>
</body>
</html>

CSS

#header{
    height: 30px;
    width: 100%;
    padding: 0 10px;
    vertical-align: middle;
    display: table-cell;
    color: gray; font-weight: bold;                
}
#container{
    position: absolute;
    top:0px;
    left:0px;
    right:0px;
    border-bottom: 2px solid gray;
}
#header ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}

#header li{
    display: inline;
    padding-right: 20px;
}
#MainContainerPanel
{
    position:absolute;  
    top:10px;
    left: 10px;
    right:10px;
    bottom:10px;

    font-size: 12px/*{fsDefault}*/;
}
#LeftPanel
{
    position:absolute;    
    left:0px;
    top:60px;
    height: 100%;        
}
#CenterPanel
{
    position:absolute;
    left:240px;
    width: 500px;
    top:60px;
    height: 100%;
}
#RightPanel
{
    position:absolute;
    left:780px;
    top:60px;
    height: 100%;
    width:230px;
    padding: 10px;
    border: 2px solid gray;
}