JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div id="Container">
    <ul>
        <li id="GreenBox">
            <ul>
                <li class="bluebox"></li>
                <li class="bluebox"></li>
                <li class="bluebox"></li>
                <li class="bluebox"></li>
            </ul>
        </li>
    </ul>
</div>

CSS

#Container
{
    width:100%;
    height:100%;
    position:relative;
    background-color:gray;
}
#GreenBox
{
    display:block;
    top:50%;
    left:50%;
    margin: -10px 0 0 -10px;
    width:20px;
    height:20px;
    padding:5px;
    background-color:green;
}
.blueBox
{
    display:block;
    position:absolute;
    background-color:blue;
    width:20px;
    height:20px;
}