VibeCoderzVibeCoderz
Telegram
All Prompts
Feature Highlight Card with Tags & CTA preview
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>
All Prompts