VibeCoderzVibeCoderz
Telegram
All Prompts
Vertical Feature List with Icons (Tailwind) preview
listfeature listiconstailwindresponsivelanding pageui component

Vertical Feature List with Icons (Tailwind)

Вертикальный список функций с иконками. Адаптивный UI-компонент на Tailwind для описания преимуществ, услуг или фич продукта на лендингах.

Prompt

<div class="mt-8 space-y-6">
  <div class="flex items-start gap-4">
    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center mt-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600">
        <polyline points="20 6 9 17 5 11"></polyline>
      </svg>
    </div>
    <div class="">
      <h4 class="text-base font-semibold text-neutral-900 mb-1">Design-First Approach</h4>
      <p class="text-sm text-neutral-600 leading-relaxed">We start with deep user research and strategic thinking before touching any pixels. Every interface decision is backed by data and user insights.</p>
    </div>
  </div>

  <div class="flex items-start gap-4">
    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center mt-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600">
        <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
      </svg>
    </div>
    <div class="">
      <h4 class="text-base font-semibold text-neutral-900 mb-1">Growth-Driven Results</h4>
      <p class="text-sm text-neutral-600 leading-relaxed">Our designs don't just look beautiful—they convert. We optimize for key metrics like user engagement, retention, and revenue growth.</p>
    </div>
  </div>

  <div class="flex items-start gap-4">
    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center mt-1">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-600">
        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
      </svg>
    </div>
    <div class="">
      <h4 class="text-base font-semibold text-neutral-900 mb-1">Lightning-Fast Delivery</h4>
      <p class="text-sm text-neutral-600 leading-relaxed">Ship features in days, not months. Our streamlined process and experienced team means you get professional results without the typical agency overhead.</p>
    </div>
  </div>
</div>
All Prompts