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

11.2k

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

28.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.

Author:
Amit Pachange

3 years ago

52k
Features list template

Author:
Lukas Müller

3 years ago

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

Author:
L.J. Weber

2 years ago

20.7k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

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

Author:
Alok

3 years ago

25.5k
Feature showcase cards

Author:
Lukas Müller

2 years ago

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

Author:
Alok

2 years ago

14.1k
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

2 years ago

7k
Product feature section
Showcase product features with an image

Author:
Anonymous

2 years ago

14k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

6 months ago

810
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components