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

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

1 year ago

18.6k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

1 year ago

25.9k
Feature showcase with images

Author:
Amit Pachange

2 years ago

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

Author:
Komal Jain

1 year ago

8.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:
Amit Pachange

2 years ago

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

Author:
Elsabe Fourie

1 year ago

7.9k
Our Vision block

Author:
L.J. Weber

2 years ago

11.1k
Features list with images and description

Author:
Noah Schmidt

1 year ago

13.2k
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

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

Author:
Alok

2 years ago

22k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

11 months ago

1.7k
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Author:
Matti

4 months ago

805

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components