JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<svg style="position: relative; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="star" viewBox="0 0 28 28" preserveAspectRatio="xMaxYMax meet">
    <title>Star Rating</title>
    <path class="star" d="M13.996,22.501 L22.649,27.997 L20.352,17.637 L27.996,10.667 L17.930,9.768 L13.996,-0.003 L10.063,9.768 L-0.003,10.667 L7.641,17.637 L5.345,27.997 L13.996,22.501 Z" />
  </symbol>
  <defs>    
    <linearGradient id="halfGradient">
      <stop stop-opacity="1" offset="50%" stop-color="#48440E"></stop>
      <stop stop-opacity="0" offset="50%"></stop>
    </linearGradient>
  </defs>
</svg>
<div class="container">
  <div class="rating">
    <span><input type="checkbox" id="star5" class="rating-checkbox" value="5" name="star" /><label class="full" for="star5" title="Awesome - 5 stars">
        <svg role="img" aria-label="rating">
          <use xlink:href="#star" class="star--half"></use>
        </svg>
      </label>
    </span>
    <span> <input type="checkbox" id="star4" class="rating-checkbox" value="4" name="star" /><label class="full" for="star4" title="Pretty good - 4 stars">
        <svg role="img" aria-label="rating">
          <use xlink:href="#star"></use>
        </svg>
      </label>
    </span>
    <span><input type="checkbox" id="star3" class="rating-checkbox" value="3" name="star" /><label class="full" for="star3" title="Meh - 3 stars" name="star">
        <svg role="img" aria-label="rating">
          <use xlink:href="#star"></use>
        </svg>
      </label>
    </span>
    <span><input type="checkbox" id="star2" class="rating-checkbox" value="2" name="star" /><label class="full" for="star2" title="Kinda bad - 2 stars">
        <svg role="img" aria-label="rating">
          <use xlink:href="#star"></use>
        </svg>
      </label>
    </span>
    <span class="active"><input type="checkbox" id="star1" class="rating-checkbox" value="1" name="star"...

SCSS

.rating {  
  width:250px;  
  padding:2em;
  
  .star--half {
  fill:url(#halfGradient);
}

  input[name="star"] {
    display: none;
    width: 0;
    opacity: 0;
    margin-left: -2px;

    &:focus ~ label svg {
      fill: #f2a200;
    }

    &:checked ~ label svg {
      fill: #f2a200;
    }
  }
  span {
    display: inline-block;
    position: relative;
    float: right;
    label {
      float: right;
      cursor: pointer;

      svg {
        fill: #CCC;
        color: transparent;
        transition: color 0.2s ease-in-out;
        width: 25px;
        height: 25px;          
        stroke: #48440E;
	stroke-width: 1;
      }

      &:hover {
        svg {
          fill: #f2a200;
        }

        ~ label {
          svg {
            fill: #f2a200;
          }
        }
      }
    }

    &:hover {
      ~ span label svg {
        fill: #f2a200;
      }
    }

    &.active ~ span {
      label svg {
        fill: #f2a200;
      }
    }
  }
}

JavaScript

$(document).ready(function() {
  var ratingElem = $('.rating input[name="star"]');

  ratingElem.change(function() {
    if (this.checked) {
      $(this).parent().addClass("active");
    }
  });
});