JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<div id="Container">
    <ul>
        <li id="GreenBox">
            <ul>
                <li class="blueBox" id="BlueBox1">
                    <div class="blueBoxInner"></div>
                </li>
                <li class="blueBox" id="BlueBox2">
                    <div class="blueBoxInner"></div>
                </li>
                <li class="blueBox" id="BlueBox3">
                    <div class="blueBoxInner"></div>
                </li>
                <li class="blueBox" id="BlueBox4">
                    <div class="blueBoxInner"></div>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#Container
{
    list-style:none;
    width:600px;
    height:600px;
    position:relative;
    background-color:gray;
}
#Container li{list-style:none;}
#GreenBox
{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-25px;
    width:50px;
    height:50px;
    background-color:green;
}
.blueBox
{
    display:block;
    position:absolute;
    width:60px;
    height:60px;
    display:none;
}
.blueBoxInner
{
    display:block;
    background-color:blue;
    width:50px;
    height:50px;
    margin:5px;
}
#GreenBox:hover .blueBox{display:block;}
#BlueBox1{top:-60px; left:-5px;}
#BlueBox2{top:-5px; left:50px;}
#BlueBox3{top:50px; left:-5px;}
#BlueBox4{top: -5px; left:-60px;}