JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="rating-box">
    <div class="rating five"></div>
</div>

<div class="rating-box">
    <div class="rating four"></div>
</div>

<div class="rating-box">
    <div class="rating three"></div>
</div>

<div class="rating-box">
    <div class="rating two"></div>
</div>

<div class="rating-box">
    <div class="rating one"></div>
</div>

<div class="rating-box">
    <div class="rating zero"></div>
</div>

CSS

.rating-box {
  position:relative;
  vertical-align: middle;
  /*font-size: 3em;*/
  font-size:34px;
  font-family: FontAwesome;
  display:inline-block;
  color: #F68127;
  float:left;
  clear:left;
}
.rating-box:before{
    content: "\f006 \f006 \f006 \f006 \f006";
  }
.rating-box .rating {
    position: absolute;
    left:0;
    top:0;
    white-space:nowrap;
    overflow:hidden;
    color: #F68127;
  }
  .rating-box .rating:before {
      content: "\f005 \f005 \f005 \f005 \f005";
    }
    
.rating-box .rating.zero {
  width:0;
}

.rating-box .rating.one {
  width:18%;
}

.rating-box .rating.two {
  width:38%;
}

.rating-box .rating.three {
  width:58%;
}

.rating-box .rating.four {
  width:78%;
}

.rating-box .rating.five {
  width:98%;
}

JavaScript

//Font-Awesome Rating Stars