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

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.7k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

27.8k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.3k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

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

Author:
Komal Jain

1 year ago

9.2k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.1k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

9 months ago

2.1k
Highlights - Speakers Section

Author:
ABDO-SY

6 months ago

516
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

1 year ago

7.2k
Feature display cards (grid layout)

Author:
Ronald Otieno

1 year ago

2.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:
kzsamir849

1 year ago

1.8k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components