JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content">
<ul class="content_row">
<li>
<img src="http://placehold.it/215x260">
<div class="item_desc">1
<br>2
<br>3</div>
<li>
<img src="http://placehold.it/215x260">
<div class="item_desc">1
<br>2
<br>3
<br>4</div>
<li>
<img src="http://placehold.it/215x260">
<div class="item_desc">1</div>
<li>
<img src="http://placehold.it/215x260">
<div class="item_desc">2
<br>3
<br>
</div>
<li>
<img src="http://placehold.it/215x260">
<div class="item_desc">1</div>
</ul>
<ul class="content_row">
<li>
<img src="http://placehold.it/345x200">
<div class="item_desc">1
<br>
</div>
<li>
<img src="http://placehold.it/345x200">
<div class="item_desc">1
<br>2
<br>3</div>
<li>
<img src="http://placehold.it/345x200">
<div class="item_desc">1
<br>2</div>
</ul>
</div>
CSS
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.content {
margin: 0 auto;
text-align: center;
}
.content > .content_row {
display: table;
width: 1140px;
}
.content .content_row li {
display: table-cell;
background-color: #f3f3f3;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.content .content_row li img {
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
display: block;
}
.content .content_row li .item_desc {
text-align: center;
}