All Prompts
All Prompts

featuretailwindresponsivectatagschipimage
Feature Highlight Card with Tags & CTA
Адаптивная карточка с тегами и CTA: показывает фичи, товары или услуги. Идеально для лендингов и дашбордов. Создана на Tailwind CSS.
Prompt
<div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 max-w-3xl">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<div class="lg:col-span-7 flex items-start gap-4">
<div class="shrink-0 h-14 w-20 rounded-xl overflow-hidden ring-1 ring-white/20 bg-white/10">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e19a3dc7-18ba-4146-ba87-10e8dc301957_320w.jpg" alt="Setup preview" class="h-full w-full object-cover">
</div>
<div>
<h3 class="text-white font-medium tracking-tight font-geist">Seamless start, tuned for focus</h3>
<p class="text-neutral-300 text-sm mt-1 font-geist">We unbox, configure OS, migrate your notes and docs, and tailor profiles for reading, writing, and deep work.</p>
</div>
</div>
<div class="lg:col-span-5">
<div class="flex items-center justify-between">
<p class="text-white/80 text-xs font-geist">Categories</p>
</div>
<div class="mt-3 flex flex-wrap gap-2">
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">E‑ink tuning</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">App profiles</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Cloud sync</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Shortcuts</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Wi‑Fi</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Security</span>
<span class="inline-flex items-center rounded-full bg-white text-neutral-900 text-xs px-2.5 py-1 font-geist">Automations</span>
<span class="inline-flex items-center rounded-full bg-white/80 text-neutral-900 text-xs px-2.5 py-1 font-geist">6+</span>
</div>
</div>
</div>
<div class="mt-6">
<a href="#" class="inline-flex items-center justify-center rounded-xl bg-amber-500 text-neutral-900 px-4 py-2.5 text-sm font-medium shadow-sm hover:bg-amber-400 transition-colors font-geist">
Get started
<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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 ml-2"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</a>
</div>
</div>