JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>Относительный рейтинг со дробными звёздами</h1>
<h2>Две звезды</h2>
<div class="rating-box">
  <div class="rating-stars" style="width:40%">
  </div>
</div>
<h2>Три и семь звезды</h2>
<div class="rating-box">
  <div class="rating-stars" style="width:74%">
  </div>
</div>

CSS

.rating-box {
    position: relative;
    vertical-align: middle;
    font-family: FontAwesome;;
    display: inline-block;
    color: #dadada;
}

.rating-box:before{
	content: "\f005 \f005 \f005 \f005 \f005";
}

.rating-box .rating-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: orange;
}

.rating-box .rating-stars:before {
    content: "\f005 \f005 \f005 \f005 \f005";
    font-weight: 900;
}