VibeCoderzVibeCoderz
Telegram
All Prompts
Dark Gradient Feature Card with Image Background preview
cardtailwindgradientimagedarkresponsivefeatureui

Dark Gradient Feature Card with Image Background

Стильная карточка с темным градиентом и фоновым изображением. Идеально для демонстрации фич и хайлайтов на лендингах.

Prompt

<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/cbbb16da-2d93-431c-a54c-832b53df959d_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>
All Prompts