JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="content">
    
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
<div class="box2">444</div>
<div class="box1">555</div>

<div class="box1">666</div>
<div class="box1">777</div>
<div class="box1">888</div>
<div class="box1">999</div>
<div class="box1">10 10 10</div>



</div>
</body>
</html>

CSS

body{
background-color:#C0BFBF;
}

.content{
margin-left:10px;
margin-right:10px;
min-width:700px;
max-width:1300px;
}

.box1{
padding:7px;
position:relative;
margin:1px;
background-color:white;
width:230px;
min-height:200px;
float:left;
-webkit-border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

.box2{
padding:7px;
position:relative;
margin:1px;
background-color:white;
width:230px;
min-height:270px;
float:left;
-webkit-border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}

.box3{
padding:7px;
position:relative;
margin:1px;
background-color:white;
width:230px;
min-height:380px;
float:left;
-webkit-border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}




.a1{
width:220px;
min-height:150px;
max-height:160px;
}

.a2{
width:220px;
min-height:220px;
max-height:230px;
}

.a3{
width:220px;
min-height:320px;
max-height:330px;
}

.box:hover{
z-index:10;
-moz-box-shadow: 0px 0px 25px silver;
-webkit-box-shadow: 0px 0px 25px silver;
box-shadow: 0px 0px 25px silver;
}

.box:active{
margin-top:2px;
margin-bottom:0px;
-moz-box-shadow: 0px 0px 0px silver;
-webkit-box-shadow: 0px 0px 0px silver;
box-shadow: 0px 0px 0px silver;
}