JSFiddle - React, Tailwind, and code Playground

by Znarkus

HTML

<div id="toolbox">
    <div class="body">
        <div class="inner">
            <div class="handle"></div>

            <div class="tab header">
                <a href="javascript:;"><span>Tab 1</span></a>
                <div class="controllers"><p>I need this to be on top of the red and behind the green. Preferably behind the blue also, but that's a later issue.</p></div>
            </div>
            
            <div class="tab background">
                <a href="javascript:;"><span>Tab 2</span></a>
            </div>
            
            <div class="tab font">
                <a href="javascript:;"><span>Tab 3</span></a>
            </div>
            
        </div>
    </div>
    <div class="bottom"></div>
</div>

CSS

body {
    background: black;
}

#toolbox {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 170px;
    z-index: 101;
}

#toolbox > .body {
    background: red;
    padding: 4px;
}

#toolbox > .body > .inner {
    background: green;
}

    #toolbox .handle {
        height: 60px;
    }
    
    #toolbox .tab {
        position: relative;
        height: 50px;
    }
    
    #toolbox .tab a {
        display: block;
        background: yellow;
        height: 50px;
        color: #545252;
        text-align: right;
        line-height: 50px;
        position: absolute;
        z-index: 2000;
        width: 170px;
    }

#toolbox .bottom {
    height: 20px;
    background: blue;
}

.controllers {
    background-color: #FFFFFF;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 140px;
    padding: 10px 0 10px 40px;
}