Home
Prashant
Feature Showcase

Feature Showcase

Showcase Features of your product

This tailwind example is contributed by Prashant, on 14-Sep-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Prashant

11.4k

Fork Fullscreen

<div class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="lg:text-center">
            <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Docker</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                A better way to work
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis
                in accusamus quisquam.
            </p>
        </div>

<div class="mt-10">
            <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
                <div class="relative">
                    <dt>
                        <div
                            class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Scalable</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis
                        suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

<div class="relative">
                    <dt>
                        <div
                            class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Super cool</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis
                        suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

<div class="relative">
                    <dt>
                        <div
                            class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Super easy</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis
                        suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>

<div class="relative">
                    <dt>
                        <div
                            class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                            </svg>
                        </div>
                        <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Great support</p>
                    </dt>
                    <dd class="mt-2 ml-16 text-base text-gray-500">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis
                        suscipit eaque, iste dolor cupiditate blanditiis ratione.
                    </dd>
                </div>
            </dl>
        </div>
    </div>
</div>

Related Examples

Feature cards with icons on top

Author:
Manon Daniel

2 years ago

17.2k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.4k
Features list with icons

Author:
L.J. Weber

2 years ago

14.4k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

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

Author:
L.J. Weber

2 years ago

20.8k
Our services component

Author:
Kris Showen

2 years ago

10.1k
Product feature section
Showcase product features with an image

Author:
Anonymous

2 years ago

14k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

2 years ago

5.3k
Features grid with icon

Author:
Freja Jensen

3 years ago

11.2k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

1 year ago

2.8k
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

52.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components