JSFiddle - React, Tailwind, and code Playground

by klaascuvelier

HTML

<div class="column left">
</div>

<div class="column center">
    <div class="header">
    </div>
    
    <div class="content">
        <ul>
             <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>        
        </ul>
    </div>
    
    <div class="bottom">
    </div>
</div>

<div class="column right">
</div>

CSS

.column {
    position: absolute;
    
    top: 0;
    bottom: 0;
}

.left {
    left: 0;
    width: 200px;
    background: #d9d9d9;
}

.right {
    right: 0;
    width: 200px;
    background: #d9d9d9;
}

.center {
    left: 200px;
    right: 200px;
}

.top {
    position: absolute;
    top: 0;
    height: 50px;
    background: yellow;
}

.bottom {
    position: absolute;
    background: #f9f9f9;
    bottom: 0;
    height: 20px;
}

.content {
    position: absolute;
    top: 50px;
    bottom: 20px;
}