JSFiddle - React, Tailwind, and code Playground

by flek

HTML

<div id="body">
    <div id="header">
        <div id="drop">
            <a>Link</a>
            <div id="container">
                <div id="subcontainer">
                    <div id="content">
                        <ul>
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="main"></div>
</div>

CSS

#body {
    position:absolute;
    overflow:hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #e8e8e8;
}
#header {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 40px;
    background: #808080;
}
#drop {
    position: relative;
    background: rgba(255,0,0,.25);
}
#container {
    position: absolute;
    width: 100%;
    top: 50px;
    background: yellow;
}
#subcontainer {
    position: absolute;
    width: 100%;
}
#content {
    position: absolute;
    overflow: auto;
    width: 240px;
    background: yellow;
}
#content ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#main {
    position: absolute;
    top:40px;
    right: 0;
    bottom: 0;
    left: 0;
    background: cyan;
}