tailwind1-6  Exercise 2: A Toggle Switch Without JavaScript
===========================================================

<label id="sw" class="relative inline-flex cursor-pointer items-center">
  <input id="cb" type="checkbox" class="peer sr-only">
  <span id="track" class="h-6 w-11 rounded-full bg-gray-300 peer-checked:bg-blue-600 peer-focus-visible:ring-2 peer-focus-visible:ring-blue-300"></span>
  <span id="knob" class="absolute left-0.5 top-0.5 size-5 rounded-full bg-white peer-checked:translate-x-5"></span>
</label>

  label (relative)                 wraps everything, so clicking the track or knob toggles the checkbox, and is the reference box for the knob
  input: peer sr-only              the real checkbox, hidden visually but still focusable and readable by screen readers (chapter 5); "peer" marks it
  track: bg-gray-300               the off colour; peer-checked:bg-blue-600 the on colour
  track: peer-focus-visible:ring-2 a keyboard focus ring
  knob: absolute left-0.5 top-0.5  2px in from the track's top-left corner; size-5 is 20px
  knob: peer-checked:translate-x-5 slides right by 5 steps of the spacing scale = 20px

Both the track and the knob come AFTER the checkbox among its siblings, which is what peer-* needs.

Measure it (the knob's offset from the track's left edge, and the track colour):

  const left = id => document.getElementById(id).getBoundingClientRect().left;
  console.log(document.getElementById('cb').checked, getComputedStyle(document.getElementById('track')).backgroundColor, left('knob') - left('track'));

Measured with real input in headless Chrome:

  before:               checked false, track gray-300, knob offset 2px
  after a mouse click:  checked true,  track blue-600, knob offset 22px, track box-shadow none (no focus ring)
  Tab to the checkbox:  focused element "cb", track box-shadow includes a 2px ring in blue-300
  then pressing Space:  checked true,  track blue-600

WHY THIS WORKS AS AN ANSWER
---------------------------
The checkbox keeps all the behaviour: it toggles on click (the label forwards clicks to it), on Space, it is in the tab order, and it submits with a form. CSS only needs to read its
:checked state. peer-checked:bg-blue-600 compiles to a rule whose selector is "an element that follows a .peer that is :checked" (the sibling combinator ~), so the track and the knob,
both later siblings of the input, react. The knob moved from 2px to 22px: its left-0.5 (2px) plus the 20px of translate-x-5.
peer-focus-visible shows the ring for the keyboard (Tab) but not after a mouse click, for the same reason as in Exercise 1: :focus-visible. If you moved the input after the track in
the HTML, nothing would react: a peer can only style the siblings that come after it.
sr-only matters here: hide the checkbox with display: none or hidden and it could not take focus or be toggled from the keyboard, so the switch would be mouse-only.