JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div class="squareswrapsolo">a</div>
        <div class="squareswrapsolo">b</div>
        <div class="squareswrapsolo">c</div>
        <div class="squareswrapsolo">d</div>
        <div style="clear: both;"></div>
        <div class="squareswrapsolo">e</div>
        <div class="squareswrapsolo">f</div>
        <div class="squareswrapsolo">g</div>
        <div class="squareswrapsolo">h</div>
    </div>

CSS

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

.squareswrapsolo {
    height: 100px;
    width: 100px;
    float: left;
    margin: 5px;
    #overflow: hidden;
    background: #ccc;
}
.squareswrapsolo:hover {
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    #z-index: 9999;
    background: red;
}