JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="test"></div>
	<div class="first box"></div>
	<div class="third box">third</div>
	<div class="second box">second</div>
	<div class="fourth box">fourth</div>
	<div class="last box">last</div>
</div>

CSS

html, body, 

.container {
    height: 100%; 
    min-height: 100%;
}

.box {
	width: 191px;
	height: 145px;
	margin: 4px;
	float: left;
	background-color: black;
}

.box:hover{
   background-color:#EF6939;
   opacity: 1;
   	overflow: hidden;

}

.test:hover{
   background-color:#EF6939;
   overflow: hidden;

}

.test {
	width: 191px;
	height: 145px;
	margin: 4px;
	float: left;
	position: absolute;
/* 	background-image: url(test.png);
 */}

.first {
    /* float: left; */
    /* background-color: red; */
	opacity: 0.1;
	
}

.second{
/*     float: left;*/    
/* background-color: green; */
}


.third{
    /* float: right; */
   /*  background-color: blue; */
}

.fourth {
    /* float: right; */
   /*  background-color: #DDDDDD; */
}

.last{
    /* float: right; */
   /*  background-color: yellow; */
}