JSFiddle - React, Tailwind, and code Playground

by smithkl42

HTML

<html>
    <body>
        <div id='parent' style='height:50px;padding-top:20px;width:400px'>
            <div class='alantaHost'>
                <div class='alantaEngageHost' style='display:none'>
                </div>
                <div class='alantaConnectHost' style='top:200px;left:200px;'>
                    <div class='alantaConnectHeader'>
                    </div>
                    <div class='alantaConnectBody'>
                    </div>
                </div>
                <div class='alantaEngageAppHost' style='top:220px;left:200px'>
                    <button style="height:100%; width:100%">Test</button>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

div.alantaHost {
    display:block; position:relative; border: 1px black solid;
}

div.alantaEngageHost{
    height:20px;
    width:80px;
}

div.alantaConnectHost{
    position:absolute;
    width:200px;
    height:200px;
    z-index:2000;
    border:2px red solid;
}

div.alantaConnectHeader{
    height:20px; border:2px blue solid;
}

div.alantaConnectBody{
    height:180px;width:200px;border:2px orange solid;
}

div.alantaEngageAppHost
{
    position:relative;
    z-index:2000;
    height:180px;
    width:200px;
    border:2px green solid;
}