Features list with icons on top

This tailwind example is contributed by Lina Lindström, on 06-Mar-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Lina Lindström

Tailwind v3.4 10.4k 17

Fork Fullscreen

<div
        class="col-span-4 sm:col-span-2 lg:col-span-1 relative px-5 pt-10 pb-2 flex flex-col justify-start items-center border-2 border-gray-300 rounded-xl text-gray-300">
        <span class="absolute -top-6 p-3 border-2 border-gray-300 rounded-full bg-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            aria-hidden="true" class="w-7 h-7 text-yellow-640">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
        </svg>
    </span>
        <h2 class="my-1 gradient-red text-base uppercase tracking-wide">Animated &amp; Responsive</h2>
        <p class="py-2 text-center text-sm">What makes Fancy Tailwind awesome is that our Tailwind CSS components are -
            for the most - animated, beautiful and responsive, which make them so cool.</p>
    </div>

<div
        class="col-span-4 sm:col-span-2 lg:col-span-1 relative px-5 pt-10 pb-2 flex flex-col justify-start items-center border-2 border-gray-300 rounded-xl text-gray-300">
        <span class="absolute -top-6 p-3 border-2 border-gray-300 rounded-full bg-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            aria-hidden="true" class="w-7 h-7 text-yellow-640">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
        </svg>
    </span>
        <h2 class="my-1 gradient-red text-base uppercase tracking-wide">Copy code &amp; Paste</h2>
        <p class="py-2 text-center text-sm">Simply copy and paste the code I provide to implement Fancy Tailwind
            components in your projects.</p>
    </div>

<div
        class="col-span-4 sm:col-span-2 lg:col-span-1 relative px-5 pt-10 pb-2 flex flex-col justify-start items-center border-2 border-gray-300 rounded-xl text-gray-300">
        <span class="absolute -top-6 p-3 border-2 border-gray-300 rounded-full bg-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            aria-hidden="true" class="w-7 h-7 text-yellow-640">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01">
            </path>
        </svg>
    </span>
        <h2 class="my-1 gradient-red text-base uppercase tracking-wide">Instructions</h2>
        <p class="py-2 text-center text-sm">Some of the components require fews modifications in your Tailwind config or
            CSS file. I obviously give you these instructions alongside the code to make sure the components work
            perfectly.</p>
    </div>

<div
        class="col-span-4 sm:col-span-2 lg:col-span-1 relative px-5 pt-10 pb-2 flex flex-col justify-start items-center border-2 border-gray-300 rounded-xl text-gray-300">
        <span class="absolute -top-6 p-3 border-2 border-gray-300 rounded-full bg-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            aria-hidden="true" class="w-7 h-7 text-yellow-640">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z">
            </path>
        </svg>
    </span>
        <h2 class="my-1 gradient-red text-base uppercase tracking-wide">Javascript</h2>
        <p class="py-2 text-center text-sm">Complex components may need some cooking and the JavaScript needed to make
            them awesome is included. So don't worry, you'll get it all !</p>
    </div>

</div>

Related Examples

tailwind services section
display features/services of your product

L.J. Weber

3 years ago

21.5k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.6k
Feature showcase with images

Amit Pachange

3 years ago

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

Komal Jain

3 years ago

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

Amit Pachange

4 years ago

53.9k
Our Vision block

L.J. Weber

3 years ago

12.7k
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Elsabe Fourie

3 years ago

10k
Features list with images and description

Noah Schmidt

3 years ago

15.2k
Feature cards with icons on top

Manon Daniel

3 years ago

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

Alok

4 years ago

26.8k
Features grid

Sophia Baker

3 years ago

10.9k
Feature card

Matti

1 year ago

2.1k