Bento grid

Build a bento-style features grid with Tailwind CSS using a 6-column, auto-row layout. Mix tile sizes: one large 2x2 hero tile, a couple of wide 2x1 tiles, and several 1x1 tiles. Each tile has a rounded-2xl surface, an icon or small graphic area, a bold title, and a short line of copy. Vary background tints subtly. Collapse to a single column on mobile.

<section class="mx-auto max-w-6xl px-6 py-16">
  <h2 class="mb-8 text-3xl font-semibold text-neutral-900">Everything you need</h2>
  <div class="grid auto-rows-[180px] grid-cols-1 gap-4 md:grid-cols-6">
    <div class="rounded-2xl bg-neutral-900 p-6 text-white md:col-span-4 md:row-span-2">
      <div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-white/10"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m13 2-8 12h7l-1 8 8-12h-7l1-8Z"/></svg></div>
      <h3 class="text-xl font-semibold">Lightning fast</h3>
      <p class="mt-2 max-w-sm text-neutral-400">Edge-rendered pages that load in under 100ms anywhere on earth.</p>
    </div>
    <div class="rounded-2xl border border-neutral-200 bg-white p-6 md:col-span-2">
      <h3 class="font-semibold text-neutral-900">Secure by default</h3>
      <p class="mt-2 text-sm text-neutral-500">SOC 2 compliant infrastructure.</p>
    </div>
    <div class="rounded-2xl border border-neutral-200 bg-white p-6 md:col-span-2">
      <h3 class="font-semibold text-neutral-900">Real-time sync</h3>
      <p class="mt-2 text-sm text-neutral-500">Changes appear instantly for everyone.</p>
    </div>
    <div class="rounded-2xl bg-neutral-100 p-6 md:col-span-3">
      <h3 class="font-semibold text-neutral-900">Integrations</h3>
      <p class="mt-2 text-sm text-neutral-500">Connect 100+ tools in a click.</p>
    </div>
    <div class="rounded-2xl bg-neutral-100 p-6 md:col-span-3">
      <h3 class="font-semibold text-neutral-900">Version history</h3>
      <p class="mt-2 text-sm text-neutral-500">Roll back to any point in time.</p>
    </div>
  </div>
</section>