JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-pane" id="reviews" style="display: block;">
                     <p>
                        <span class="heading_size">reviews:</span>
                     </p>
                     <p class="text-justify mb-0 mb-1">
                        </p><div class="review"><div class="mb-2 renter_review"><div class="renter_rating_image">
                           <img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
                           </div><p style="text-align:center;font-style:italic;margin-bottom:0%;">this bobcat was amazing</p><span>10.22,07, 04, 18</span></div><div class="renter_review_firstname">James</div></div><div class="review"><div class="mb-2 renter_review"><div class="renter_rating_image">
                           <img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
                           </div><p style="text-align:center;font-style:italic;margin-bottom:0%;">it was perfect!</p><span>10.14,01, 17, 18</span></div><div class="renter_review_firstname">James</div></div>                     <p></p>
                  </div>

CSS

.heading_size
{
    font-size: 1.25rem;
    font-weight: bold;
}

.item_poster_image
{
    height: 120px;
    width: 120px;
    -o-object-fit: contain;
    object-fit: contain;
    max-width: 100%;
    border-radius: 100%;
    object-fit: cover;
}

.item_review_image
{
    height: 120px;
    width: 120px;
    -o-object-fit: contain;
    object-fit: contain;
    max-width: 100%;
    border-radius: 100%;
    object-fit: cover;
}





.renter_rating_image
{
  padding: 0;
  margin: 0px 10px 0px 10px;
}

.review
{
    display: flex;
}

.renter_review_firstname
{
    margin-left: 5%;
    margin-top: 2%;
}