Features list template

This tailwind example is contributed by Lukas Müller, on 11-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Lukas Müller

Tailwind v3.4 11.5k 16

Fork Fullscreen

<div class="container mx-auto max-w-5xl flex gap-12 flex-wrap items-start justify-center md:justify-between">
    <div class="grid gap-4 justify-items-center text-center md:flex-1">
        <div class=" rounded-full border-8 border-amber-400 p-4 ">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-14 h-14">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z">
                </path>
            </svg>
        </div>
        <h3 class="text-3xl font-bold">Safe</h3>
        <p>Our products are secure and private out-of-the-box</p>
    </div>
    <div class="grid gap-4 justify-items-center text-center md:flex-1">
        <div class=" rounded-full border-8 border-amber-400 p-4 ">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-14 h-14">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path>
            </svg>
        </div>
        <h3 class="text-3xl font-bold">Efficient</h3>
        <p>Feel good about your wallet and the environment</p>
    </div>
    <div class="grid gap-4 justify-items-center text-center md:flex-1">
        <div class=" rounded-full border-8 border-amber-400 p-4 ">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-14 h-14">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z">
                </path>
            </svg>

</div>
        <h3 class="text-3xl font-bold">Proven</h3>
        <p>Leading the Smart Home world for 10 years</p>
    </div>
</div>

Related Examples

Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
tailwind services section
display features/services of your product

L.J. Weber

3 years ago

21.4k
Product feature showccase section with images

R.P Ketan

3 years ago

16.9k
Feature cards
Feature showcase

Steven Kuhn

4 years ago

10.7k
Feature showcase with images

Amit Pachange

3 years ago

14.7k
Features grid with icon

Freja Jensen

3 years ago

11.7k
Feature cards with icons on top

Manon Daniel

3 years ago

18.3k
Features list with images and description

Noah Schmidt

3 years ago

15.1k
Responsive cards with hover

Robert Chunga

2 years ago

3.5k
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

150
House Cleaning Website Services Section
House Cleaning Website Services Section Photo by @candjstudios & @framesforyourheart on Unsplash

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.2k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k