Home
Mr Robot
Feature Cards

Feature Cards

w/ large icons

This tailwind example is contributed by Mr Robot, on 17-Jul-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Mr Robot

9.8k

Fork Fullscreen

<div class="mx-auto mt-24 mb-20 max-w-6xl text-center p-6 dark:bg-gray-900">
    <h2 class="mb-12 text-center text-4xl font-extrabold text-gray-900 dark:text-gray-200 sm:text-5xl">More Of Our
        Projects
    </h2>
    <div
        class="gr mx-auto max-w-3xl items-stretch space-y-4 text-left sm:flex sm:space-y-0 sm:space-x-8 sm:text-center">
        <a class="flex w-full items-center rounded-xl border border-black border-opacity-10 px-4 py-6 text-black duration-200 hover:border-opacity-0 hover:no-underline hover:shadow-lg dark:text-white dark:hover:bg-white dark:hover:bg-opacity-10 sm:flex-col sm:hover:shadow-2xl"
            href="#" target="_blank">
            <img class="mr-4 w-12 sm:mr-0 sm:h-32 sm:w-32" src="https://swiperjs.com/images/projects/framework7.svg" alt="Framework7">
            <div>
                <div class="font-semibold text-black dark:text-white sm:mt-4 sm:mb-2">Framework7</div>
                <div class="text-sm opacity-75">Full featured framework for building iOS, Android &amp; desktop apps
                </div>
            </div>
        </a>
        <a class="flex w-full items-center rounded-xl border border-black border-opacity-10 px-4 py-6 text-black duration-200 hover:border-opacity-0 hover:no-underline hover:shadow-lg dark:text-white dark:hover:bg-white dark:hover:bg-opacity-10 sm:flex-col sm:hover:shadow-2xl"
            href="#" target="_blank">
            <img class="mr-4 w-12 sm:mr-0 sm:h-32 sm:w-32" src="https://swiperjs.com/images/projects/atropos.svg" alt="Atropos">
            <div>
                <div class="font-semibold text-black dark:text-white sm:mt-4 sm:mb-2">Atropos</div>
                <div class="text-sm opacity-75">Stunning touch-friendly 3D parallax hover effects</div>
            </div>
        </a>
        <a class="flex w-full items-center rounded-xl border border-black border-opacity-10 px-4 py-6 text-black duration-200 hover:border-opacity-0 hover:no-underline hover:shadow-lg dark:text-white dark:hover:bg-white dark:hover:bg-opacity-10 sm:flex-col sm:hover:shadow-2xl"
            href="#" target="_blank">
            <img class="mr-4 w-12 sm:mr-0 sm:h-32 sm:w-32" src="https://swiperjs.com/images/projects/konsta.svg" alt="Konsta UI">
            <div>
                <div class="font-semibold text-black dark:text-white sm:mt-4 sm:mb-2">Konsta UI</div>
                <div class="text-sm opacity-75">Pixel perfect mobile UI components built with Tailwind CSS</div>
            </div>
        </a>
    </div>
</div>

Related Examples

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

Author:
Alok

2 years ago

13.9k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

28.1k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.5k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

16.8k
Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

2 years ago

9.3k
Feature display cards (grid layout)

Author:
Ronald Otieno

1 year ago

2.8k
Feature Cards Section
showcase key features or benefits with cards.

Author:
Anonymous

1 year ago

3.8k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

1 year ago

14k
Features list with icons on top

Author:
Lina Lindström

2 years ago

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

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

1 year ago

7.3k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

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

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components