<!-- チェックボックスがチェックされると背景と文字色を変更する -->
<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>
This Pen doesn't use any external CSS resources.