Home
Lina Lindström
Features list with icons on top

Features list with icons on top

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

Feature showcase

Author Lina Lindström

9.8k

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

Author:
L.J. Weber

2 years ago

20.5k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

28.4k
Feature showcase with images

Author:
Amit Pachange

2 years ago

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

Author:
Komal Jain

2 years ago

9.5k
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.9k
Our Vision block

Author:
L.J. Weber

2 years ago

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

Author:
Elsabe Fourie

2 years ago

9.1k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.6k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

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

Author:
Alok

3 years ago

25.4k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Author:
Kavita Joshi

2 years ago

7k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components