JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="rating">
  <img  class="img-responsive" src="https://lh6.ggpht.com/z8rGcobymHcqSLtHpIsa42YdiuWOgl1tenbpuoAXRVFmIpdwCPCRZVmlZzQFdnqTOw=w300" alt="cat">
  <svg class="star" data-rating="1" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="2" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="3" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="4" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="5" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <button class="rate">Rate</button>
  <button class="clear">Clear</button>
</div>
<div class="rating">
  <img  class="img-responsive" src="https://lh6.ggpht.com/z8rGcobymHcqSLtHpIsa42YdiuWOgl1tenbpuoAXRVFmIpdwCPCRZVmlZzQFdnqTOw=w300" alt="cat">
  <svg class="star" data-rating="1" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="2" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="3" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="4" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="5" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <button class="rate">Rate</button>
  <button class="clear">Clear</button>
</div>
<div class="rating">
  <img  class="img-responsive" src="https://lh6.ggpht.com/z8rGcobymHcqSLtHpIsa42YdiuWOgl1tenbpuoAXRVFmIpdwCPCRZVmlZzQFdnqTOw=w300" alt="cat">
  <svg...

SCSS

.star{
  display:inline-block;
  width:51px;
  height:48px;
  path{
    fill:#fff;
    stroke:#000;
  }
  &.selected path{
    fill:#000;
  }
}           
.rate{
  display:block;
  opacity:0;
  transition:opacity .2s;
  margin-bottom:20px;
  &.show{
    opacity:1;
  }
}
.clear{
  opacity:0;
  display:block;
  transition:opacity .2s;
}
.rate.show + .clear{
  opacity:1;
}
.img-responsive{
  display:block;
  max-width:100%;
}

JavaScript

var stars = document.querySelectorAll(".star");
for(var i = 0, l = stars.length; i < l; i++){
	stars[i].addEventListener("click", function(){
  	setStars(this);
    this.parentNode.querySelector(".rate").classList.add("show");
    this.parentNode.querySelector(".clear").addEventListener("click", clear);  
    this.parentNode.querySelector(".rate").addEventListener("click", rate);
  })
}


function setStars(star){
	var stars = star.parentNode.querySelectorAll(".star");
  var rating = 0;
  for(var i = 0, l = stars.length; i < l; i++){
  	stars[i].classList.remove("selected");
  }
  for(var i = 0, l = stars.length; i < l; i++){
  	if(+(stars[i].getAttribute("data-rating")) <= +(star.getAttribute("data-rating"))){
    	stars[i].classList.add("selected");
      rating++;
      star.parentNode.setAttribute("data-rating", rating);
    }
  }
}
function clear(){
	var stars = this.parentNode.querySelectorAll(".star");
  var rate = this.parentNode.querySelector(".rate");
   for(var i = 0, l = stars.length; i < l; i++){
  	stars[i].classList.remove("selected");
  }
  rate.classList.remove("show");
}
function rate(){
	alert("item rating: " + this.parentNode.getAttribute("data-rating"));
}