JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<p>Block1</p>
<div class="banner">
<div class="block1">
<img src="hoels.png" />
<p>Banquet Halls</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Resorts</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Hotels</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="container">
<p>Block2</p>
<div class="banner">
<div class="block1">
<img src="hoels.png" />
<p>Banquet Halls</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Resorts</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Hotels</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Guest Houses</p>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="container">
<p>Block3</p>
<div class="banner">
<div class="block1">
<img src="hoels.png" />
<p>Resorts</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Hotels</p>
</div>
<div class="block1">
<img src="hoels.png" />
<p>Farm Houses</p>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="container">
<p>Block4</p>
<div class="banner">
...
CSS
.container{
width:100%;
margin:0 auto;
max-width:991px;
}
.banner{
padding:20px;
}
.block1{
float:left;
width:25%;
text-align:center;
}
.block1 img{
width:100%;
max-width:100px;
}