JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
    <div class="form-check-inline">
      <label class="form-check-label" for="1">
        <input type="radio" id="1" value="1" name="rating" class="rating" />
        <span class="wpcomment-input-option-label wpcomment-label-radio">1</span>
      </label>
    </div>

    <div class="form-check-inline">
      <label class="form-check-label" for="2">
        <input type="radio" id="2" value="2" name="rating" class="rating" checked="checked"/>
        <span class="wpcomment-input-option-label wpcomment-label-radio">2</span>
      </label>
    </div>

    <div class="form-check-inline">
      <label class="form-check-label" for="3">
        <input type="radio" id="3" value="3" name="rating" class="rating" />
        <span class="wpcomment-input-option-label wpcomment-label-radio">3</span>
      </label>
    </div>
  </div>

CSS

.form-group {
  display: flex;
}

.form-check-inline .rating {
  display: none;
}

.form-check-inline span {
  padding-right: 2%;
  cursor: pointer;
  color: transparent;
}

.form-check-inline span:before {
  content: '\2606';
  color: red;
}

.form-check-inline span:hover:before,
.form-check-inline span:hover ~ span:before {
  content: '\2605';
  color: gold;
}

.form-check-inline .rating:checked ~ span:before {
  content: '\2605';
  color: gold;
}