Notification Preview Card

<div class="relative w-full max-w-3xl rounded-xl bg-white/80 ring-1 ring-slate-200/60 shadow-lg shadow-slate-200/70 backdrop-blur-md overflow-hidden">
  <div class="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white to-transparent"></div>
  <div class="relative p-6 sm:p-10 bg-white">
    <h1 class="sm:text-3xl tracking-tight text-slate-900 font-sans font-semibold text-2xl">Fully functional through notifications</h1>
    <p class="mt-4 sm:text-base text-slate-600 leading-relaxed font-sans text-sm">When you need your phone switched off, your suggestions will be sent to you as notifications.</p>
    <div class="relative mt-8 sm:mt-10">
      <div class="pointer-events-none absolute -top-3 left-6 right-6 h-6 rounded-full bg-violet-400/60 ring-1 ring-white/30 blur-[1px]"></div>
      <div class="relative z-10 overflow-hidden rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 text-white ring-1 ring-white/10 shadow-xl shadow-violet-600/30">
        <div class="flex items-start gap-3 p-4 sm:p-5">
          <div class="shrink-0 grid h-10 w-10 place-items-center rounded-xl bg-white/15 ring-1 ring-white/25">
            <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" class="h-5 w-5 opacity-95">
              <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path>
              <path d="M20 2v4"></path>
              <path d="M22 4h-4"></path>
              <circle cx="4" cy="20" r="2"></circle>
            </svg>
          </div>
          <div class="flex-1 min-w-0">
            <div class="flex items-baseline justify-between gap-3">
              <p class="truncate font-semibold tracking-tight font-sans text-sm">Topic Suggestion: Hobbies</p>
              <span class="shrink-0 text-xs text-white/85 font-sans">10s ago</span>
            </div>
            <p class="mt-1 text-xs leading-relaxed text-white/95 font-sans">
              Ask about their favorite hobbies or recent activities they've enjoyed. It's a great way to find common interests.
            </p>
          </div>
        </div>
        <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/10 to-transparent"></div>
      </div>
    </div>
  </div>
</div>