JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<div>
  <input type="checkbox" id="check1" checked />
  <label for="check1">A</label>
  <label for="check1">B</label>
  <label for="check1" onclick="">C</label>
</div>
<div>
  <input type="checkbox" id="check2" />
  <label for="check2">A</label>
  <label for="check2">B</label>
  <label for="check2" onclick="">C</label>
</div>

CSS

span {
  color: red;
}
input:checked ~ label {
  color: green;
}
input:checked + label {
  color: violet;
}
input:not(:checked) ~ label {
  color: yellow;
}
input:not(:checked) + label {
  color: blue;
}