JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="box_reviews">
<div class="review_item">
<div class="review_item_txt">
<span>Great Company!</span>
<p>"Donec convallis vitae mi nec ultricies. Cras dolor libero, ultrices vitae turpis at."</p>
<span>Mr Blobby</span> 
</div>
<div class="review_item_stars"><span></span><span></span><span></span><span></span><span></span></div>
</div>

<div class="review_item">
<div class="review_item_txt">
<span>Absolutely Fantastic!</span>
<p>"Donec convallis vitae mi nec ultricies. Cras dolor libero, ultrices vitae turpis at."</p>
<span>Mr Blobby</span> 
</div>
<div class="review_item_stars"><span></span><span></span><span></span><span></span><span></span></div>  
</div>

<div class="review_item">
<div class="review_item_txt">
<span>Absolutely Fantastic!</span>
<p>"Donec convallis vitae mi nec ultricies. Cras dolor libero, ultrices vitae turpis at."</p>
<span>Mr Blobby</span> 
</div>
<div class="review_item_stars"><span></span><span></span><span></span><span></span><span></span></div>  
</div>

<div class="review_item">
<div class="review_item_txt">
<span>Absolutely Fantastic!</span>
<p>"Donec convallis vitae mi nec ultricies. Cras dolor libero, ultrices vitae turpis at."</p>
<span>Mr Blobby</span> 
</div>
<div class="review_item_stars"><span></span><span></span><span></span><span></span><span></span></div>  
</div>

<div class="review_item">
<div class="review_item_txt">
<span>Absolutely Fantastic!</span>
<p>"Donec convallis vitae mi nec ultricies. Cras dolor libero, ultrices vitae turpis at."</p>
<span>Mr Blobby</span> 
</div>
<div class="review_item_stars"><span></span><span></span><span></span><span></span><span></span></div>  
</div>
</div>

CSS

/* affiliates */
.box_reviews {padding:1rem 0;gap:10px;max-width:1100px; margin:auto;display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;justify-content: center;-webkit-align-content: stretch;align-content: stretch;-webkit-align-items: stretch;align-items: stretch;}

.review_item {width:250px;height:250px;background-color:#ffffff;border:1px solid #275DAA;position:relative;border-radius:5px;}
.review_item_txt {padding:1rem;color:#555555;}
.review_item_txt span {font-weight:bold;color:#275DAA;} 

.review_item_stars {position:absolute;bottom:0;width:100%;height:40px;background-color:#275DAA;display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;gap:0.5rem;}
.review_item_stars span {display:inline-block;background-color:#86B559;width:30px; height:30px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}

@media screen and (max-width: 780px) {
.box_reviews {max-width:auto;overflow:auto;margin:0 2rem;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;}
.review_item {flex: 0 0 auto;}   

.box_reviews::-webkit-scrollbar {background-color:white;}
.box_reviews::-webkit-scrollbar-track {background-color:#eeeeee;}
.box_reviews::-webkit-scrollbar-thumb {background:var(--primary);}
}