JSFiddle - React, Tailwind, and code Playground
HTML
<div class="level">
<div class="block">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
<div class="block">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
<div class="block">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
<div class="block">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
<div class="block">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
<div class="block">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
<div class="block block-big">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
<div class="block">
<a href="https://www.google.com.ua"></a>
<div></div>
</div>
</div>
CSS
.level{
max-width: 990px;
margin: 10px auto 0;
width: 100%;
}
.block{
width: 33.33%;
display: inline-block;
height: 330px;
float: left;
padding: 0 5px 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
vertical-align: top;
position: relative;
}
.block-big{
width: 66.66%;
}
.block div{
background: #000;
width: 100%;
height: 100%;
}
a{
position: absolute;
z-index: 9;
width: 100%;
height: 100%;
}