JSFiddle - React, Tailwind, and code Playground
HTML
<div class="psAppWrapper">
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
<div class="psAppTile">
<img src="imageSource" class="psAppIcon"/>
<p class="psAppTitle">Title</p>
</div>
</div>
CSS
.psAppIcon {
width: 80px;
height: 80px;
}
.psAppTitle {
text-align: center;
}
.psAppTile {
width: 80px;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.psAppWrapper {
width: 100%;
text-align:center;
}