JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<div class="review-options">
    <input type="radio" value="5" name="overall" id="overallRating5"><label for="overallRating5">5</label>
    <input type="radio" value="4" name="overall" id="overallRating4"><label for="overallRating4">4</label>
    <input type="radio" value="3" name="overall" id="overallRating3"><label for="overallRating3">3</label>
    <input type="radio" value="2" name="overall" id="overallRating2"><label for="overallRating2">2</label>
    <input type="radio" value="1" name="overall" id="overallRating1"><label for="overallRating1">1</label>
</div>

CSS

.review-options {
    width: 300px;
    padding: 1em 0;
}
.review-options input {
  display: none;
}
.review-options label {
  width: 39px;
  height: 31px;
  border: 1px solid #999;
  border-left-color: #fff;
  float: right;
  background: #bbbbbb;
  background: -moz-linear-gradient(top,  #bbbbbb 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top,  #bbbbbb 0%,#ffffff 100%);
  background: -o-linear-gradient(top,  #bbbbbb 0%,#ffffff 100%);
  background: -ms-linear-gradient(top,  #bbbbbb 0%,#ffffff 100%);
  background: linear-gradient(to bottom,  #bbbbbb 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#ffffff',GradientType=0 );
  position: relative;
  text-indent: -999px;
  padding: 0;
}
.review-options label:before {
  content: "";
  position: absolute;
  display: block;
  border-bottom: 5px solid transparent;
  border-left: 41px solid #FFFFFF;
  height: 1px;
  width: 0;
  left: -1px;
  top: -1px;
}
.review-options input[value="4"] + label:before {
  height: 6px;
}
.review-options input[value="3"] + label:before {
  height: 11px;
}
.review-options input[value="2"] + label:before {
  height: 16px;
}
.review-options input[value="1"] + label:before {
  height: 21px;
}
.review-options input:checked + label,
.review-options input:checked + label + input + label,
.review-options input:checked + label + input + label + input + label,
.review-options input:checked + label + input + label + input + label + input + label,
.review-options input:checked + label + input + label + input + label + input + label + input + label {
  border-color: #4084A5;
  border-left-color: #fff;
  background: #6fbee6;
  background: -moz-linear-gradient(top,  #6fbee6 0%, #2986b4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6fbee6), color-stop(100%,#2986b4));
  background:...