<div class="rating-cont">
<i class="ph-star-fill"></i>
<i class="ph-star-fill"></i>
<i class="ph-star-half-fill"></i>
</div>

<div class="rating-cont">
<i class="ph-star-fill"></i>
<i class="ph-star-fill"></i>
<i class="ph-star-fill"></i>
<i class="ph-star-half-fill"></i>
</div>

<div class="rating-cont">
<i class="ph-star-fill"></i>
<i class="ph-star-fill"></i>
<i class="ph-star-fill"></i>
<i class="ph-star-fill"></i>
<i class="ph-star-half-fill"></i>
</div>

<div class="rating-bdg rating-bdg-red">
<span>2.5</span>  <i class="ph-star-fill"></i>
</div>
 
<div class="rating-bdg rating-bdg-yellow">
<span>3.5</span>  <i class="ph-star-fill"></i>
</div>
 
<div class="rating-bdg rating-bdg-green">
<span>4.5</span>  <i class="ph-star-fill"></i>
</div>