<!-- チェックボックスがチェックされると背景と文字色を変更する -->
<div class='p-6'>
  <label class='
    rounded-md grid w-fit grid-flow-col gap-2 border p-4
    has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200
  '>
    CheckBox
    <input type='checkbox' class='checked:border-indigo-500' />
  </label>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com