Side-by-Side Product Cards

<!--
  Two product cards that stack below 40rem. The avatar is a gradient tile with
  initials (aria-hidden) - no external image to load. The CTA is a real link
  with a focus-visible ring.
-->
<div class="grid w-full gap-4 sm:grid-cols-2">
  <section aria-label="ADYSRE Cloud" class="flex flex-col rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
    <div class="flex items-center gap-3">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-sm font-bold text-white" aria-hidden="true">AC</span>
      <div class="min-w-0">
        <h3 class="truncate text-base font-semibold text-gray-900 dark:text-gray-100">ADYSRE Cloud</h3>
        <p class="truncate text-xs text-gray-500 dark:text-gray-400">Fully managed</p>
      </div>
    </div>
    <p class="mt-4 text-2xl font-bold text-gray-900 dark:text-gray-100">$29/mo</p>
    <ul class="mt-3 grid gap-2">
      <li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
        <span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
        <span><span class="sr-only">Included: </span>Zero maintenance</span>
      </li>
    </ul>
    <a href="#" class="mt-5 inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 motion-reduce:transition-none dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Start free</a>
  </section>

  <section aria-label="Self Hosted" class="flex flex-col rounded-xl border border-blue-600 bg-white p-5 dark:border-blue-400 dark:bg-gray-900">
    <div class="flex items-center gap-3">
      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-sm font-bold text-white" aria-hidden="true">SH</span>
      <div class="min-w-0">
        <h3 class="truncate text-base font-semibold text-gray-900 dark:text-gray-100">Self Hosted</h3>
        <p class="truncate text-xs text-gray-500 dark:text-gray-400">Your infrastructure</p>
      </div>
    </div>
    <p class="mt-4 text-2xl font-bold text-gray-900 dark:text-gray-100">$0/mo</p>
    <ul class="mt-3 grid gap-2">
      <li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
        <span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
        <span><span class="sr-only">Included: </span>Data in your VPC</span>
      </li>
    </ul>
    <a href="#" class="mt-5 inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">View the docs</a>
  </section>
</div>