JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
    <div class="child"></div>
</div>

CSS

.top {
    width: 100px;
    height: 32px;
    text-align: center;
    background-color: green
}

.top:hover {
    background-color: blue
}

.child {
    width: 16px;
    height: 16px;
    margin-top: 8px;
    background-color: red;
    display: inline-block
}

.child:active {
    background-color: gray
}