Features grid with icon

This tailwind example is contributed by Freja Jensen, on 08-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Freja Jensen

Tailwind v3.4 11.7k 14

Fork Fullscreen

<section class="bg-gray-100 py-8">
    <div class="container mx-auto text-center px-4">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">Features</h2>
        <div class="flex flex-wrap -mx-4">
            <div class="w-full md:w-1/3 px-4 mb-8">
                <div class="bg-white p-8 shadow-md rounded-md">
                    <i class="fas fa-lock text-4xl text-blue-500 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Secure</h3>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="w-full md:w-1/3 px-4 mb-8">
                <div class="bg-white p-8 shadow-md rounded-md">
                    <i class="fas fa-globe-americas text-4xl text-blue-500 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Global</h3>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="w-full md:w-1/3 px-4 mb-8">
                <div class="bg-white p-8 shadow-md rounded-md">
                    <i class="fas fa-users text-4xl text-blue-500 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Collaborative</h3>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.8k
Features list template

Lukas Müller

3 years ago

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

L.J. Weber

3 years ago

21.5k
Product feature showccase section with images

R.P Ketan

3 years ago

17k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

4 years ago

26.7k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
Features grid example
Tailwind clean and responsive features section with the heading

Alok

3 years ago

14.6k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Kavita Joshi

2 years ago

7.4k
Facts
A simple facts overview

Matti

1 year ago

2.5k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Developer Kwame

2 years ago

2.6k