VibeCoderzVibeCoderz
Telegram
All Prompts
Revenue & Analytics Feature Card with Tag Grid preview
cardfeaturetailwindresponsivehovericonsgrid

Revenue & Analytics Feature Card with Tag Grid

Интерактивная карточка с метками Tailwind CSS. Демонстрирует категорию, заголовок, описание и сетку тегов-иконок. Идеально для лендингов и витрин.

Prompt

<article class="relative ring-1 ring-neutral-200 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200 bg-white rounded-3xl pt-5 pr-5 pb-5 pl-5 max-w-xl">
      <div class="flex items-center gap-3 mb-4">
        
        <span class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 text-emerald-600 text-xs px-2.5 py-1">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
          Revenue Engine
        </span>
      </div>
      <h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">Revenue &amp; Analytics</h3>
      <p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Transform your business with intelligent revenue tracking, predictive analytics, and automated growth optimization.</p>
      <div class="grid grid-cols-2 gap-3">
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="bar-chart-3" class="lucide lucide-bar-chart-3 w-4 h-4 text-neutral-700"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>
          Real-time Metrics
        </span>
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="target" class="lucide lucide-target w-4 h-4 text-neutral-700"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="6" class=""></circle><circle cx="12" cy="12" r="2" class=""></circle></svg>
          Growth Targets
        </span>
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="zap" class="lucide lucide-zap w-4 h-4 text-neutral-700"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
          Auto Optimization
        </span>
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="shield-check" class="lucide lucide-shield-check w-4 h-4 text-neutral-700"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          Secure Platform
        </span>
      </div>
    </article>
All Prompts