JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div class ="square"></div>
    <div class ="square"></div>
    <div class ="square"></div>
    <div class ="square"></div>
    <div class ="square"></div>
    <div class ="square"></div>
    <div class ="square"></div>
    <div class ="square"></div>
    <div class ="square"></div>
</div>

CSS

.square{
background-color:#737373; 
float:left;
position: relative;
width: 30%;
padding-bottom: 30.66%; 
margin:1.66%;
}

#container:hover .square{
background-color:black;
}