JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rating-result">
        <span class="active"></span>  
        <span class="active"></span>    
        <span class="active"></span>  
        <span class="active"></span>    
        <span class="active"></span>
        <span class="active half"></span>
</div>

CSS

.rating-result {
	width: 265px;
	margin-left: 1%;
	display: flex;
	align-items: stretch;
	flex-direction: row;
}
.rating-result span {
	padding: 0;
	font-size: 40px;
	line-height: 1;
	color: lightgrey;
	text-shadow: 1px 1px #bbb;
}
.rating-result > span:before {
	content: '★';
}
span.half {
  width: 16px;
  overflow: hidden;
  position: relative;
  margin-left: -16px;
}
.rating-result > span.half:before {
	content: '★';
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
}
.rating-result > span.active {
	color: gold;
	text-shadow: 1px 1px black;
}