Feature Cards

w/ large icons

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

Feature showcase

Author Mr Robot

Tailwind v3.4 10.3k 14

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

Alok

3 years ago

14.6k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Features list with images and description

Noah Schmidt

3 years ago

15.1k
Feature cards with icons on top

Manon Daniel

3 years ago

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

Komal Jain

3 years ago

10.5k
Our services component

Kris Showen

3 years ago

10.6k
Feature cards
Feature showcase

Steven Kuhn

4 years ago

10.7k
Features list with icons on top

Lina Lindström

3 years ago

10.3k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
accordion with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

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

kzsamir849

2 years ago

2.7k
Our Vision block

L.J. Weber

3 years ago

12.7k