JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <span>
    <input type="radio" name="ddd" id="input-4">
    <label for="input-4">4</label>
    <input type="radio" name="ddd" id="input-3">
    <label for="input-3">3</label>
    <input type="radio" name="ddd" id="input-2">
    <label for="input-2">2</label>
    <input type="radio" name="ddd" id="input-1">
    <label for="input-1">1</label>
  </span>
</div>

<div class="wrapper">
  <span>
    <input type="radio" name="ddd" id="input-2-4">
    <label for="input-4">4</label>
    </span>
    <span>
    <input type="radio" name="ddd" id="input-2-3">
    <label for="input-3">3</label>
    </span>
    <span>
    <input type="radio" name="ddd" id="input-2-2">
    <label for="input-2">2</label>
    </span>
    <span>
    <input type="radio" name="ddd" id="input-2-1">
    <label for="input-1">1</label>
  </span>
</div>

CSS

.wrapper {
  display:flex;
  flex-direction: row-reverse;
}

.wrapper input:checked ~ label,
.wrapper input:checked ~ label ~ label {
  background-color: green;
}

.wrapper input:not(:checked) ~ label:hover,
.wrapper input:not(:checked) ~ label:hover ~ label {
  background-color: red;
}