JSFiddle - React, Tailwind, and code Playground

HTML

<span class="rating star1">1</span>
<span class="rating star2">2</span>
<span class="rating star3">3</span>
<span class="rating star4">4</span>
<span class="rating star5">5</span>

CSS

.rating.star1:before {
    content: '\2605';
    color: red;
}
.rating.star2:before {
    content: '\2605\2605';
    color: red;
}
.rating.star3:before {
    content: '\2605\2605\2605';
    color: red;
}
.rating.star4:before {
    content: '\2605\2605\2605\2605';
    color: red;
}
.rating.star5:before {
    content: '\2605\2605\2605\2605\2605';
    color: red;
}
.rating { display: block; }