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

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

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

11 months ago

1.5k
Simple Features section

Author:
Odessa Young

2 years ago

16.7k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

1 year ago

3.3k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.9k
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.5k
Responsive Features Section

Author:
Abdul Baset Bappy

4 months ago

806
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

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

1 year ago

2.6k
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.6k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

2 years ago

12.2k
Features grid

Author:
Sophia Baker

2 years ago

10k
Features section

Author:
ariaw

1 week ago

20

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components