How to handle Hover and Focus states?

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2">
  Hover and focus styles
</button>

<div class="group">
  <span class="group-hover:text-blue-500">
    Changes when parent hovered
  </span>
</div>

<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">
  Changes when checkbox checked
</label>