Recent Activity Feed Card (Tailwind)

<div
  class="md:p-7 ring-1 ring-white/15 bg-center text-gray-100 bg-white/10 rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-sm backdrop-blur-xl"
  style="animation: 0.7s ease-out 0.18s 1 normal both running fadeUp; font-family: Inter, ui-sans-serif, system-ui;">
  <div class="flex items-center justify-between">
    <div class="">
      <h3 class="text-lg font-medium tracking-tight text-gray-100 font-geist">Recent activity</h3>
      <p class="text-xs text-gray-400 mt-1 font-geist">Events across projects</p>
    </div>
    <button class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg bg-white/10 border border-white/15 hover:bg-white/20 text-gray-100 backdrop-blur font-geist">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="filter" style="width:16px;height:16px;stroke-width:1.5;" class="lucide lucide-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" class=""></polygon></svg>
            Filter
          </button>
  </div>
  <div class="mt-4 divide-y divide-white/10">
    <!-- Row -->
    <div class="flex items-center gap-3 py-3">
      <img class="h-9 w-9 rounded-lg object-cover ring-1 ring-white/15" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/bcaefeee-31cd-4c69-9a33-39ee0ad78c30_320w.jpg" alt="Aly avatar">
      <div class="min-w-0 flex-1">
        <div class="flex items-center justify-between">
          <p class="text-sm font-medium truncate text-gray-100 font-geist">Aly K.</p>
          <span class="text-[11px] text-gray-400 font-geist">2m ago</span>
        </div>
        <p class="text-xs text-gray-300 truncate font-geist">
          Published new dashboard "Northstar KPIs"
        </p>
      </div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-dashboard" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-layout-dashboard text-gray-200"><rect width="7" height="9" x="3" y="3" rx="1" class=""></rect><rect width="7" height="5" x="14" y="3" rx="1" class=""></rect><rect width="7" height="9" x="14" y="12" rx="1" class=""></rect><rect width="7" height="5" x="3" y="16" rx="1" class=""></rect></svg>
            </span>
    </div>
    <!-- Row -->
    <div class="flex items-center gap-3 py-3">
      <img class="h-9 w-9 rounded-lg object-cover ring-1 ring-white/15" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/76672c59-0193-4795-ba6b-96fe356d9cab_320w.jpg" alt="Jon avatar">
      <div class="min-w-0 flex-1">
        <div class="flex items-center justify-between">
          <p class="text-sm font-medium truncate text-gray-100 font-geist">Jon S.</p>
          <span class="text-[11px] text-gray-400 font-geist">18m ago</span>
        </div>
        <p class="text-xs text-gray-300 truncate font-geist">
          Rotated API key for project "Nova-Edge"
        </p>
      </div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="key-round" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-key-round text-gray-200"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" class=""></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
            </span>
    </div>
    <!-- Row -->
    <div class="flex items-center gap-3 py-3">
      <img class="h-9 w-9 rounded-lg object-cover ring-1 ring-white/15" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ad72c649-95c4-41ec-aaa0-dda91ae572f0_320w.jpg" alt="Mei avatar">
      <div class="min-w-0 flex-1">
        <div class="flex items-center justify-between">
          <p class="text-sm font-medium truncate text-gray-100 font-geist">Mei W.</p>
          <span class="text-[11px] text-gray-400 font-geist">1h ago</span>
        </div>
        <p class="text-xs text-gray-300 truncate font-geist">
          Added retention cohort for "Onboarding v3"
        </p>
      </div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-users text-gray-200"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path></svg>
            </span>
    </div>
    <!-- Row -->
    <div class="flex items-center gap-3 py-3">
      <img class="h-9 w-9 rounded-lg object-cover ring-1 ring-white/15" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3868b0c2-14f2-40ec-a8dc-25b11f31285b_320w.jpg" alt="Priya avatar">
      <div class="min-w-0 flex-1">
        <div class="flex items-center justify-between">
          <p class="text-sm font-medium truncate text-gray-100 font-geist">Priya D.</p>
          <span class="text-[11px] text-gray-400 font-geist">3h ago</span>
        </div>
        <p class="text-xs text-gray-300 truncate font-geist">
          Synced 3 sources to warehouse "lakehouse-us"
        </p>
      </div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="database" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-database text-gray-200"><ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path><path d="M3 12A9 3 0 0 0 21 12" class=""></path></svg>
            </span>
    </div>
  </div>
  <div class="mt-4 flex items-center justify-between">
    <button class="text-xs text-gray-100 px-3 py-2 rounded-lg bg-white/10 border border-white/15 hover:bg-white/20 inline-flex items-center gap-1.5 backdrop-blur font-geist">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="history" style="width:16px;height:16px;stroke-width:1.5;" class="lucide lucide-history text-gray-200"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" class=""></path><path d="M3 3v5h5" class=""></path><path d="M12 7v5l4 2" class=""></path></svg>
            View all
          </button>
    <span class="text-[11px] text-gray-400 font-geist">Updated just now</span>
  </div>
</div>