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 {
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    #z-index: 9999;
    background: #000;
}