Home
Matti
Features

Features

This tailwind example is contributed by Matti, on 02-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

1.1k

Fork Fullscreen

<section>
  <div class="w-full dark:bg-gray-800 dark:text-white">
    <div class="w-full md:w-3/5 mx-auto py-12 md:py-24">
      <div class="w-full flex flex-col text-center">
        <h1 class="text-4xl md:text-5xl font-semibold text-gray-800 dark:text-white">
            Create your <span class="text-emerald-600">new components</span>
        </h1>
        <p class="w-full px-[12%] mb-3 text-base md:text-xl whitespace-pre-line text-gray-500">
          Here on <span class="text-emerald-600">tailwindflex</span>.com you've all you need to build your own <br class="hidden lg:inline" /> components, new templates and share your fantastic results with everyone &#8212; if you want
        </p>
      </div>
      <div class="flex flex-col md:flex-row px-2 md:px-6 md:pt-18 dark:text-white mt-8">
        <div class="w-full md:w-1/4 border-b-1 border-gray-100 text-gray-500 border-b border-gray-200 dark:border-gray-700 md:border-b-0 md:border-r md:border-gray-200 items-center text-center px-8 py-5 flex flex-col">
            <img src="https://img.freepik.com/fotos-kostenlos/schoene-gebirgslandschaft_23-2151151038.jpg?t=st=1733174665~exp=1733178265~hmac=d2a7496fee2a12e05f5d7ddc57243883283de2482c72eed7b3e0590e2d49e674&w=2000" class="rounded-full h-24 w-24" alt="" title="" />
            <h1 class="mt-4 font-semibold text-gray-500 dark:text-white text-2xl">Login pages</h1>
            <h2 class="mt-1 mb-4 text-gray-500 dark:text-gray-400 font-thin text-xl">Components</h2>
            <p class="font-base md:font-thin text-gray-500 mb-12 md:!mb-0">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <div class="w-full mt-8 md:!mt-0 md:w-1/4 border-b-1 border-gray-100 text-gray-500 border-b border-gray-200 dark:border-gray-700 md:border-b-0 md:border-r md:border-gray-200 items-center text-center px-8 py-5 flex flex-col">
            <img src="https://img.freepik.com/fotos-kostenlos/digitale-kunst-mond-tapete_23-2150918875.jpg?t=st=1733174604~exp=1733178204~hmac=b39a50a44f122f5a374cd20803f9d685207bd1f26b1df6b3174d3b1c78023fc0&w=2000" class="rounded-full h-24 w-24" alt="" title="" />
            <h1 class="mt-4 font-semibold text-gray-500 dark:text-white text-2xl">Buttons</h1>
            <h2 class="mt-1 mb-4 text-gray-500 dark:text-gray-400 font-thin text-xl">Elements</h2>
            <p class="font-base md:font-thin text-gray-500 mb-12 md:!mb-0">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <div class="w-full mt-8 md:!mt-0 md:w-1/4 border-b-1 border-gray-100 text-gray-500 border-b border-gray-200 dark:border-gray-700 md:border-b-0 md:border-r md:border-gray-200 items-center text-center px-8 py-5 flex flex-col">
            <img src="https://img.freepik.com/fotos-kostenlos/schoene-gebirgslandschaft_23-2151151047.jpg?t=st=1733174689~exp=1733178289~hmac=84650498808c057d748b113c1660275d262aebfe8ba1ea8778d7d29b5697b8ae&w=2000" class="rounded-full h-24 w-24" alt="" title="" />
            <h1 class="mt-4 font-semibold text-gray-500 dark:text-white text-2xl">Team cards</h1>
            <h2 class="mt-1 mb-4 text-gray-500 dark:text-gray-400 font-thin text-xl">Components</h2>
            <p class="font-base md:font-thin text-gray-500 mb-12 md:!mb-0">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
        <div class="w-full mt-8 md:!mt-0 md:w-1/4 border-b-1 border-gray-100 text-gray-500 items-center text-center px-8 py-5 flex flex-col">
            <img src="https://img.freepik.com/fotos-kostenlos/schoene-gebirgslandschaft_23-2151151082.jpg?t=st=1733174635~exp=1733178235~hmac=c3b90133b81dacb2897cdef5f2daa46e120de8ed34caed25252f329316a7a4fc&w=2000" class="rounded-full h-24 w-24" alt="" title="" />
            <h1 class="mt-4 font-semibold text-gray-500 dark:text-white text-2xl">Call to action</h1>
            <h2 class="mt-1 mb-4 text-gray-500 dark:text-gray-400 font-thin text-xl">Components</h2>
            <p class="font-base md:font-thin text-gray-500 mb-12 md:!mb-0">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

10 months ago

1.9k
Features grid example
Tailwind clean and responsive features section with the heading

Author:
Alok

2 years ago

14.1k
Features list with images and description

Author:
Noah Schmidt

2 years ago

14.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

3 years ago

52.1k
Feature display cards (grid layout)

Author:
Sophia Baker

3 years ago

15.4k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.4k
Feature, Showcase

Author:
Matti

1 year ago

1.4k
Features grid with icon

Author:
Freja Jensen

2 years ago

11.2k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

11 months ago

988
Simple Features section

Author:
Odessa Young

2 years ago

16.9k
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

17.1k
Facts
A simple facts overview

Author:
Matti

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components