JSFiddle - React, Tailwind, and code Playground

by rafalry

HTML

<div class="button">
    <div class="popup-outer">
    <div class="popup">
    <div class="popup-inner">
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
    </div>
    </div>
    </div>
</div>

CSS

.button{
    width: 20px;
    height: 40px;
    background-color: red;
}
.popup-inner{
}
.popup-outer{
}

.popup{
    max-width: 170px;
    position: absolute;
    background-color: blue;
    opacity: 0.5;
}
.item{
    display:inline-block;
    width: 20px;
    height: 20px;
    background-color: orange;
    border: 1px solid black;
}