Saved For Later

<!--
  Two lists - in-cart and saved-for-later - each row moving to the other on a
  real <button> press. The move buttons carry aria-labels naming the product and
  direction, and each list has its own labelled heading so the two regions are
  distinct to a screen reader.
-->
<div class="mx-auto w-full max-w-2xl space-y-8">
  <section aria-labelledby="cart-h">
    <h2 id="cart-h" class="text-sm font-semibold text-gray-900 dark:text-gray-100">In your cart (1)</h2>
    <ul class="mt-3 divide-y divide-gray-100 dark:divide-gray-800">
      <li class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center">
        <div class="h-14 w-14 flex-none rounded-lg bg-gradient-to-br from-lime-400 to-emerald-500" aria-hidden="true"></div>
        <div class="min-w-0 flex-1"><p class="text-sm font-medium text-gray-900 dark:text-gray-100">Trail Bottle</p><p class="text-xs text-gray-500 dark:text-gray-400">$22.00</p></div>
        <button type="button" class="self-start rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 sm:self-auto dark:text-blue-400 dark:hover:bg-blue-950" aria-label="Save Trail Bottle for later">Save for later</button>
      </li>
    </ul>
  </section>

  <section aria-labelledby="saved-h">
    <h2 id="saved-h" class="text-sm font-semibold text-gray-900 dark:text-gray-100">Saved for later (1)</h2>
    <ul class="mt-3 divide-y divide-gray-100 dark:divide-gray-800">
      <li class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center">
        <div class="h-14 w-14 flex-none rounded-lg bg-gradient-to-br from-violet-400 to-fuchsia-500" aria-hidden="true"></div>
        <div class="min-w-0 flex-1"><p class="text-sm font-medium text-gray-900 dark:text-gray-100">Wool Beanie</p><p class="text-xs text-gray-500 dark:text-gray-400">$28.00</p></div>
        <button type="button" class="self-start rounded-md px-2 py-1 text-sm font-medium text-blue-600 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 sm:self-auto dark:text-blue-400 dark:hover:bg-blue-950" aria-label="Move Wool Beanie to cart">Move to cart</button>
      </li>
    </ul>
  </section>
</div>