JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<div class="rating"></div>

SCSS

.rating {
  position: relative;
  display: inline-block;
  font-size: 3rem;
  font-family: sans-serif;
  white-space: nowrap;
  
  &:before,
  &:after {
    content: '★★★★★';
  }
  
  &:after {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: gold;
    width: 67%;
  }
}