JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">★★★★★★★★★★</div>

CSS

.test{
font-size: 50px;
text-transform: uppercase;
background: linear-gradient(90deg, yellow calc(100% - 37%), white calc(100% - 37%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: table;
-webkit-text-stroke: 2px black;
text-stroke: 2px black;
  }