JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div class="wrap">
    <div class="menu"></div>
    <div class="header">
	<div class="action"></div>
    </div>
    <div class="content">
        <div>
			<div class="art">
            <div class="tabs">
                <div></div>
            </div>
			</div>
        </div>
    </div>
    <div class="player">
        <div></div>
    </div>
</div>

CSS

body,
html {
    padding: 0;
    margin: 0
}

.wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.menu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    background: #ccc
}

.header {
    position: absolute;
    left: 60px;
    top: 0;
    right: 240px;
    height: 0;
    background: #000;
	z-index:1;
	opacity:.5;
}
.action{width:40px;height:40px;background:#0c0;cursor:pointer}

.content {
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    right: 240px;
    background: #fff;
    overflow: auto;
}

.player {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 240px;
    background: #373737;
    overflow: auto;
}

.content > div {
    height: 1200px;
	
	
}

.player > div {
    height: 1000px
}

.tabs {
    height: 60px;
    background: #4b4b4b;
    overflow-x: auto;
    overflow-y: hidden
}

.tabs > div {
    width: 1000px;
    height: 60px
}
.art{height:300px;background:#c00}