JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item...