VibeCoderzVibeCoderz
Telegram
All Prompts
Icon Feature Card with Bulleted Highlights preview
featureicontailwindresponsivebulletedlanding pagetypography

Icon Feature Card with Bulleted Highlights

Карточка с иконкой, заголовком и списком для демонстрации преимуществ. Адаптивный дизайн, подходит для лендингов.

Prompt

<div class="space-y-5">
                <div class="flex items-center gap-3">
                    <div class="h-12 w-12 rounded-full bg-black/5 ring-1 ring-black/10 flex 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="camera" class="lucide lucide-camera h-5 w-5 text-black/90"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" class=""></path><circle cx="12" cy="13" r="3" class=""></circle></svg>
                    </div>
                    <div class="">
                        <h3 class="text-lg font-semibold text-black font-geist tracking-tight">03. Experience</h3>
                        <p class="text-xs text-black/60 font-geist uppercase tracking-wider">Live the Journey</p>
                    </div>
                </div>
                <p class="text-sm text-black/80 font-geist">Your adventure unfolds naturally. Real-time adjustments keep you flowing with the rhythm of discovery.</p>
                <div class="space-y-2">
                    <div class="flex items-center gap-2 text-black/60">
                        <div class="h-2 w-2 rounded-full bg-green-400"></div>
                        <span class="text-xs font-geist">Real-time updates</span>
                    </div>
                    <div class="flex items-center gap-2 text-black/60">
                        <div class="h-2 w-2 rounded-full bg-blue-400"></div>
                        <span class="text-xs font-geist">Adaptive routing</span>
                    </div>
                    <div class="flex items-center gap-2 text-black/60">
                        <div class="h-2 w-2 rounded-full bg-purple-400"></div>
                        <span class="text-xs font-geist">Seamless flow</span>
                    </div>
                </div>
            </div>
All Prompts