Tailwind Community Preview Card with Hover Effect

<a href="#" class="group relative overflow-hidden transition hover:bg-white/10 min-h-[280px] flex items-end bg-white/5 border-white/10 border rounded-2xl backdrop-blur-xl">
  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ef7ebee1-9aa8-44cb-a356-f344d0edd3b1_800w.jpg" alt="" class="absolute inset-0 h-full w-full object-cover" style="">
  <div class="relative w-full bg-slate-50/5 border-white/10 rounded-t-xl border-t pt-5 pr-5 pb-5 pl-5 backdrop-blur-lg">
    <div class="flex items-start justify-between">
      <div class="">
        
        <h3 class="text-lg font-semibold text-slate-100 tracking-tight mb-1">Virtual Reality</h3>
        <p class="text-sm text-slate-300/90">A community for VR and novices alike, regular and friendly chat.</p>
      </div>
      <div class="inline-flex size-10 absolute -top-5 right-4 bg-[conic-gradient(from_90deg,var(--tw-gradient-stops))] from-purple-400/20 via-cyan-500/40 to-purple-400/80 border-slate-50/10 border rounded-full pr-3 pl-3 items-center justify-center">
  <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="headset" class="lucide lucide-headset size-5 text-indigo-200"><path d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" class=""></path><path d="M21 16v2a4 4 0 0 1-4 4h-5" class=""></path></svg>
</div>
    </div>
    <div class="mt-4 flex items-center gap-4 text-xs text-slate-300/80">
      <span class="inline-flex items-center gap-1.5">
        <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="users" class="lucide lucide-users size-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg> 245,102 Members
      </span>
      <span class="inline-flex items-center gap-1.5">
        <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="badge-check" class="lucide lucide-badge-check size-4"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg> Verified
      </span>
    </div>
  </div>
</a>