Notification Settings List

<!--
  Notification preferences. Each toggle is a real <button role="switch"> with
  aria-checked and its own accessible name - state is carried by the knob's
  position AND aria-checked, never by colour alone. The row is flex-col at the
  phone width and only becomes a justified sm:flex-row once there's space, so the
  label and switch never collide at 320px.
-->
<ul class="w-full max-w-md divide-y divide-gray-100 rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900">
  <li class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
    <div class="min-w-0">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Product updates</p>
      <p class="mt-0.5 text-xs text-gray-600 dark:text-gray-400">News about features and improvements.</p>
    </div>
    <button type="button" role="switch" aria-checked="true" aria-label="Product updates" class="relative inline-flex h-6 w-11 flex-none items-center rounded-full bg-blue-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 motion-reduce:transition-none dark:bg-blue-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
      <span class="inline-block h-5 w-5 translate-x-5 rounded-full bg-white shadow transition motion-reduce:transition-none"></span>
    </button>
  </li>
  <li class="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
    <div class="min-w-0">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Security alerts</p>
      <p class="mt-0.5 text-xs text-gray-600 dark:text-gray-400">Sign-ins and password changes.</p>
    </div>
    <button type="button" role="switch" aria-checked="false" aria-label="Security alerts" class="relative inline-flex h-6 w-11 flex-none items-center rounded-full bg-gray-300 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 motion-reduce:transition-none dark:bg-gray-700 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
      <span class="inline-block h-5 w-5 translate-x-0.5 rounded-full bg-white shadow transition motion-reduce:transition-none"></span>
    </button>
  </li>
</ul>