JSFiddle - React, Tailwind, and code Playground

HTML

<div class="person-rating">
      <ul>
        <li class="new-1">
          <img src="images/image-anne.jpg">
          <h4>Colton Smith <br>
            Verified Buyer<br></h4>
          <p>"We needed the same printed design as the one we had ordered a week prior.
          Not only did they find the original order, but we also received it in time.
          Excellent!"</p>
        </li>
        <li class="new-2">
          <img src="images/image-colton.jpg">
          <h4>Irene Roberts <br>
          Verified Buyer<br></h4>
          <p>"Customer service is always excellent and very quick turn around. Completely
          delighted with the simplicity of the purchase and the speed of delivery."</p>
        </li>
        <li class="new-3">
          <img src="images/image-irene.jpg">
          <h4>Anne Wallace <br>
          Verified Buyer<br></h4>
          <p>"Put an order with this company and can only praise them for the very high
          standard. Will definitely use them again and recommend them to everyone!"</p>
        </li>
      </ul>
    </div>

CSS

.person-rating li {
   list-style: none;
   display: inline-block;
   width: 25%;
   border: 1px solid rgb(104, 69, 104);
   background-color: rgb(104, 69, 104);
   padding: 30px;
   border-radius: 8px;
   vertical-align: top;
 }

 .person-rating li.new-1 {
   margin-top: 70px;
 }
 .person-rating li.new-2 {
   margin-top: 40px;
 }
 .person-rating li.new-3 {
   margin-top: 10px;
 }