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

8.7k

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

16.9k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

1 year ago

23.5k
Feature showcase with images

Author:
Amit Pachange

1 year ago

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

Author:
Komal Jain

1 year ago

8k
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

44.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.1k
Our Vision block

Author:
L.J. Weber

1 year ago

10.2k
Features list with images and description

Author:
Noah Schmidt

1 year ago

12.1k
Feature cards with icons on top

Author:
Manon Daniel

1 year ago

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

Author:
Alok

2 years ago

19.3k
Service section

Author:
inbarajan P

3 months ago

433
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

3 months ago

768

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components