<section id="reviews">

  <h2>Customer reviews</h2>

  <div class="rating-summary" data-rating="4.7"></div>
  <p class="rating-total">40 customer ratings</p>

  <div
      class="rating-distribution" 
      data-total="40"
      data-color-range="red, lime">

    <div
      class="rating-row"
      data-stars="5"
      data-count="30"
      data-percentage="75">
      <span class="rating-bar"></span>
    </div>

    <div
      class="rating-row"
      data-stars="4"
      data-count="4"
      data-percentage="10">
      <span class="rating-bar"></span>
    </div>
    
    <div
      class="rating-row"
      data-stars="3"
      data-count="3"
      data-percentage="8">
      <span class="rating-bar"></span>
    </div>
    
    <div
      class="rating-row"
      data-stars="2"
      data-count="2"
      data-percentage="5">
      <span class="rating-bar"></span>
    </div>
    
    <div
      class="rating-row"
      data-stars="1"
      data-count="1"
      data-percentage="2">
      <span class="rating-bar"></span>
    </div>

  </div>

</section>