JSFiddle - React, Tailwind, and code Playground

by rdenver6

HTML

<svg style="position: absolute; 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>
</svg>
<svg class="star-source" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <g id="star">
      <path d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,12.118
               l11.547-1.2L16.026,0.6L20.388,10.918z" />
    </g>

    <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"></use>
          </svg>
        </label>
        <input type="checkbox" id="star4half" class="rating-checkbox" value="4.5" name="star" /><label class="half" for="star4half" title="Pretty good - 4.5 stars" name="star"> <svg role="img" aria-label="rating">
            <use xlink:href="#star"></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>
        <input type="checkbox" id="star3half" class="rating-checkbox" value="3.5"...

SCSS

.rating {  
  width:250px;  
  padding:2em;
  
  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;
        /* alt star */
        width: 32px;
        height: 32px;
        padding:5px;
      }

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

        ~ label {
          svg {
            fill: #f2a200;
          }

          &.half {
            svg {
              fill: #f2a200;
            }
          }
        }
      }

      &.half {
        overflow: hidden;
        position: absolute;
        width: 25px;
        svg {
          fill: none;
        }

        &:hover {
          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");
    }
  });
});