Home
Freja Jensen
Features grid with icon

Features grid with icon

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

Feature showcase

Author Freja Jensen

10.8k

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

Author:
Sameer Sultana

2 years ago

27.7k
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.

Author:
Amit Pachange

3 years ago

51.2k
Features list template

Author:
Lukas Müller

2 years ago

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

Author:
L.J. Weber

2 years ago

19.9k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

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

Author:
Alok

2 years ago

24.2k
Feature showcase cards

Author:
Lukas Müller

2 years ago

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

Author:
Alok

2 years ago

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

Author:
Kavita Joshi

1 year ago

6.6k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

7 months ago

1.1k
Services

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.7k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

2 months ago

171

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components