JSFiddle - React, Tailwind, and code Playground

HTML

<div class="class_1">
     <span></span>
</div>

CSS

.class_1 {
display: block;
width: 40px;
height: 40px;
background-color: #2b2b2b;
}

.class_1:hover {
background-color: #000000;
cursor: pointer;
}
.class_1:hover span {
background-color: #ffffff;
cursor: pointer;
}
.class_1 span {
display: block;
width: 20px;
height: 20px;
float: right;
margin-top: 10px;
margin-bottom: 10px;
background-color: #aaaaaa;
}

.class_1 span:hover {
background-color: #ffffff;
cursor: pointer;
}