JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
CSS
#wrapper {
display: grid; /* 1 */
grid-template-columns: repeat(5, 90px); /* 2 */
grid-auto-rows: 50px; /* 3 */
grid-gap: 10px; /* 4 */
width: 516px;
}
.bigger {
grid-row: 1 / 3; /* 5 */
grid-column: 2 / 3; /* 6 */
}
.block {
background-color: red;
}