Glassmorphic Feature Card with Image & Tags

<div class="card-top glass-effect w-full h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em] max-w-xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
      <div class="absolute inset-0 border-white/20 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
      <div class="absolute inset-0 border-white/10 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
      
      <div class="flex flex-col h-full pt-6 pr-6 pb-7 pl-6">
        <div class="flex mb-2 items-start justify-between">
          <div class="w-full">
            <div class="flex items-center gap-3 mb-3">
              <span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-neutral-400 to-neutral-500">
                <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-4 w-4 text-white"><path d="M6 5v11" class=""></path><path d="M12 5v6" class=""></path><path d="M18 5v14" class=""></path></svg>
              </span>
              <h3 class="text-lg font-semibold tracking-tight font-sans">Evaluation Pipeline</h3>
            </div>
            <p class="text-neutral-300 text-sm font-light mb-4 font-sans">Comprehensive evaluation and testing system for AI models</p>
          </div>
        </div>

        <article class="relative overflow-hidden sm:p-5 h-80 bg-gradient-to-br from-zinc-900 to-zinc-950 border-zinc-800 border rounded-2xl pt-4 pr-4 pb-4 pl-4">
        <div class="absolute inset-0"></div>
        <div class="relative z-10 h-full flex flex-col">
            <div class="flex items-start justify-between">
                <div class="flex items-center gap-1">
                    <span class="h-1 w-1 rounded-full bg-zinc-300"></span>
                    <span class="h-1 w-1 rounded-full bg-zinc-600"></span>
                    <span class="h-1 w-1 rounded-full bg-zinc-600"></span>
                </div>
                <span class="text-[11px] text-zinc-500 font-normal font-geist" style="">01</span>
            </div>
            <div class="flex-1 flex flex-col bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/623ab9b2-cd35-4978-acc7-4be2f48ac610_800w.jpg)] bg-cover rounded-lg mt-2 mb-2 pt-6 pb-6 items-center justify-center">
                
            </div>
            <div class="mt-auto">
                <h3 class="text-[15px] sm:text-base font-medium leading-snug tracking-tight text-zinc-100 font-geist" style="">Smart automation that learns from your patterns</h3>
                <p class="mt-1 text-sm text-zinc-400 font-geist" style="">Workflows that improve over time.</p>
            </div>
        </div>
        <div class="absolute bottom-4 right-4">
            
        </div>
    </article>

        
        
        <div class="h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent mb-3"></div>
        
        <div class="flex flex-wrap gap-2 mb-4">
          <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-neutral-500/10 border border-neutral-500/20 text-neutral-300 font-sans">
            GUARDRAILS
          </span>
          <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-neutral-600/10 border border-neutral-600/20 text-neutral-300 font-sans">
            A/B TESTING
          </span>
        </div>

        <div class="mt-5 inline-flex items-center text-sm font-medium text-neutral-300 font-sans">
          Learn more 
          <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="ml-2 h-4 w-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>
    </div>