<div class="rating-container">
  <div class="star-group">
    <input type="radio" id="s5" name="rating" value="5" /><label for="s5" title="5 Stars">&#9733;</label>
    <input type="radio" id="s4" name="rating" value="4" /><label for="s4" title="4 Stars">&#9733;</label>
    <input type="radio" id="s3" name="rating" value="3" /><label for="s3" title="3 Stars">&#9733;</label>
    <input type="radio" id="s2" name="rating" value="2" /><label for="s2" title="2 Stars">&#9733;</label>
    <input type="radio" id="s1" name="rating" value="1" /><label for="s1" title="1 Star">&#9733;</label>
  </div>
</div>

.rating-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: inline-block;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.star-group {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
}
.star-group input {
  display: none;
}
.star-group label {
  font-size: 32px;
  color: #e4e5e9;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.star-group label:hover,
.star-group label:hover ~ label,
.star-group input:checked ~ label {
  color: #fbbf24;
  transform: scale(1.1);
}