Responsive 3-Card Feature Grid with Tailwind

<div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3 max-w-5xl">
  <!-- Card 1 -->
  <article
    class="group relative overflow-hidden sm:p-8 bg-white/5 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-sm">
    <div class="absolute -left-24 -top-24 h-56 w-56 rounded-full bg-indigo-500/10 blur-3xl"></div>
    <div class="flex gap-4 items-start">
      <div class="relative">
        <div class="grid h-12 w-12 place-items-center rounded-full bg-white/5 ring-1 ring-white/15">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap"
            class="lucide lucide-zap h-5 w-5 text-indigo-300">
            <path
              d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
            </path>
          </svg>
        </div>
        <div class="pointer-events-none absolute -inset-4 rounded-full border border-white/5"></div>
      </div>
    </div>
    <h2 class="mt-6 text-[22px] sm:text-[24px] font-semibold tracking-tight text-white">
      Plan sprints without chaos
    </h2>
    <p class="mt-3 text-slate-400">
      Drag initiatives onto your calendar and auto‑balance workload across the week—no spreadsheets required.
    </p>
  </article>

  <!-- Card 2 -->
  <article
    class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-6 sm:p-8 backdrop-blur-sm">
    <div class="absolute right-[-20%] top-[-30%] h-64 w-64 rounded-full bg-cyan-400/10 blur-3xl"></div>
    <div class="flex items-start gap-4">
      <div class="relative">
        <div class="grid h-12 w-12 place-items-center rounded-full bg-white/5 ring-1 ring-white/15">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="notebook-pen" class="lucide lucide-notebook-pen h-5 w-5 text-cyan-300">
            <path d="M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"></path>
            <path d="M2 6h4"></path>
            <path d="M2 10h4"></path>
            <path d="M2 14h4"></path>
            <path d="M2 18h4"></path>
            <path
              d="M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z">
            </path>
          </svg>
        </div>
        <div class="pointer-events-none absolute -inset-4 rounded-full border border-white/5"></div>
      </div>
    </div>
    <h2 class="mt-6 text-[22px] sm:text-[24px] font-semibold tracking-tight text-white">
      Notes that write themselves
    </h2>
    <p class="mt-3 text-slate-400">
      Auto‑capture highlights for every session and keep everything searchable—zero templates to babysit.
    </p>
  </article>

  <!-- Card 3 -->
  <article
    class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-6 sm:p-8 backdrop-blur-sm">
    <div class="absolute -bottom-24 -right-24 h-64 w-64 rounded-full bg-fuchsia-500/10 blur-3xl"></div>
    <div class="flex items-start gap-4">
      <div class="relative">
        <div class="grid h-12 w-12 place-items-center rounded-full bg-white/5 ring-1 ring-white/15">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="target"
            class="lucide lucide-target h-5 w-5 text-fuchsia-300">
            <circle cx="12" cy="12" r="10"></circle>
            <circle cx="12" cy="12" r="6"></circle>
            <circle cx="12" cy="12" r="2"></circle>
          </svg>
        </div>
        <div class="pointer-events-none absolute -inset-4 rounded-full border border-white/5"></div>
      </div>
    </div>
    <h2 class="mt-6 text-[22px] sm:text-[24px] font-semibold tracking-tight text-white">
      Cut interruptions, stay in flow
    </h2>
    <p class="mt-3 text-slate-400">
      Route pings to Focus Mode and surface only what’s urgent when you’re ready.
    </p>

    <div class="mt-5 flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-slate-300 ring-1 ring-white/10">
                FlowChat
                <span class="ml-1 rounded-full bg-white/5 px-2 py-0.5 text-[10px] text-slate-300 ring-1 ring-white/10">Soon</span>
      </span>
      <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-slate-300 ring-1 ring-white/10">
                Orbit Calls
                <span class="ml-1 rounded-full bg-white/5 px-2 py-0.5 text-[10px] text-slate-300 ring-1 ring-white/10">Soon</span>
      </span>
      <span class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-slate-300 ring-1 ring-white/10">
                Threadline
                <span class="ml-1 rounded-full bg-white/5 px-2 py-0.5 text-[10px] text-slate-300 ring-1 ring-white/10">Soon</span>
      </span>
    </div>
  </article>
</div>