Bullet points list

for sections like "Why Choose Us"

This tailwind example is contributed by Orson Kincaid, on 03-Oct-2024. Component is made with Tailwind v3.4. It is responsive.

List

Author Orson Kincaid

Tailwind v3.4 2.5k 7

Fork Fullscreen

<section class="mt-16 max-w-xl mx-auto px-2">
    <h2 class="text-2xl font-bold text-gray-900 sm:text-3xl">
        Why Choose Our Platform?
    </h2>
    <ul class="mt-6 space-y-4 text-lg text-gray-600">
        <li class="flex items-start">
            <svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="ml-3">Join a curated selection of tools designed to enhance productivity and collaboration.</span>
        </li>
        <li class="flex items-start">
            <svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="ml-3">Our community relies on us to deliver the best project management solutions, as shown by our loyal user base.</span>
        </li>
        <li class="flex items-start">
            <svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="ml-3">Enjoy a robust audience with <strong>50K+ monthly visitors</strong> actively seeking tools.</span>
        </li>
        <li class="flex items-start">
            <svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="ml-3">Gain lifetime visibility for your tool, ensuring continuous exposure to potential users.</span>
        </li>
        <li class="flex items-start">
            <svg class="flex-shrink-0 w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <span class="ml-3">We'll showcase your tool in our <a class="text-indigo-600 hover:text-indigo-500" href="http://127.0.0.1:8000/blog">feature articles</a> and user guides.</span>
        </li>
    </ul>
</section>