JSFiddle - React, Tailwind, and code Playground

HTML

<div class="star">
<div class="rating" style="width:50%">
 <span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span> 
 </div>
</div>

CSS

.star{ width:200px; position: relative;
    color: #bdbdbd;}

	.rating span{ font-size:30px;
 margin-left:-4px;

    
    white-space: nowrap;
    overflow: hidden;
}
.rating  span:before { 
 content:"\2605";
 position: absolute;
color:gold;
 }