JSFiddle - React, Tailwind, and code Playground

HTML

<div class='bricks'>
    <div class='sidebar sidebar-left'></div>
    <div class='center-contain'>
        <div class='center'></div>
        <div class='center'></div>
        <div class='center'></div>
        <div class='center'></div>
    </div>
    <div class='sidebar sidebar-right'></div>
</div>

CSS

* {
    box-sizing: border-box;
}
.bricks {
    display: flex;
    height: 450px;
    flex-direction: row;
}
.bricks > * {
    border: solid 1px #222;
}
.sidebar {
    flex: 0 0 220px;
    background-image: url(https://placehold.it/220x450/075883);
}
.center-contain {
    flex: 0 0 402px;
    font-size: 0;
}
.center {
    display: inline-block;
    background-image: url(https://placehold.it/200x225);
    height: 225px;
    width: 200px;
    border: solid 1px #e5e5e5;
}