All Prompts
All Prompts

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>