JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div class="squareswrapsolo"></div>
        <div class="squareswrapsolo"></div>
        <div class="squareswrapsolo"></div>
        <div class="squareswrapsolo"></div>
        <br />
        <div class="squareswrapsolo"></div>
        <div class="squareswrapsolo"></div>
        <div class="squareswrapsolo"></div>
        <div class="squareswrapsolo"></div>
    </div>

CSS

.wrapper {
    height: 600px;
    width: 600px;
    overflow: hidden;
    position: relative;
}

.squareswrapsolo {
    height: 100px;
    width: 100px;
    display: inline-block;
    overflow: hidden;
    background: #ccc;
}
.squareswrapsolo:hover {
    background: #000;
}