JSFiddle - React, Tailwind, and code Playground

HTML

<section class="content">
<div class="item"><img src=""></div>
    <div class="item"><img src=""></div>
        <div class="item"><img src=""></div>
            <div class="item"><img src=""></div>
                <div class="item"><img src=""></div>
                    <div class="item"><img src=""></div>
        <div class="item"><img src=""></div>

</section>

CSS

.content{
width: 100%;
margin: 0 auto;
display: flex;
    flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}

.item{
width:303px; height: 242px;
    background: #f00;
    margin: 10px;
xdisplay: block;
}