JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<div class="rating star1">
	<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="rating star2">
	<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="rating star3">
	<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="rating star4">
	<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
<div class="rating star5">
	<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>

CSS

.rating span{color: #AAA; font-size: 2em}
.star1 span:nth-child(-n+1){color: #ffc107;}
.star2 span:nth-child(-n+2){color: #ffc107;}
.star3 span:nth-child(-n+3){color: #ffc107;}
.star4 span:nth-child(-n+4){color: #ffc107;}
.star5 span:nth-child(-n+5){color: #ffc107;}