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.2k
Steps section
Show features or steps of your website. Each step Includes Icons.

Komal Jain

2 years ago

10.4k
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Matti

1 year ago

1.9k
Features grid with icon

Freja Jensen

3 years ago

11.6k
Palette2

Lasse Strand Ringvold

7 months ago

774
tailwind services section
display features/services of your product

L.J. Weber

3 years ago

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

Alok

3 years ago

26.7k
Layout switcher with tailwindcss and alpinejs

Michael Andreuzza

2 years ago

1.5k
Responsive Features Section

Abdul Baset Bappy

1 year ago

1.5k