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

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

why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

17.2k
Features list template

Author:
Lukas Müller

3 years ago

11.3k
accordion with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.2k
Responsive Features Section

Author:
Abdul Baset Bappy

8 months ago

995
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

7 months ago

1.1k
Simple Features section

Author:
Odessa Young

2 years ago

17k
Feature Cards Section
showcase key features or benefits with cards.

Author:
Anonymous

2 years ago

4k
House Cleaning Website Services Section
House Cleaning Website Services Section Photo by @candjstudios & @framesforyourheart on Unsplash

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

7.5k
Facts
A simple facts overview

Author:
Matti

1 year ago

2k
Features section

Author:
ariaw

4 months ago

240
Features list with icons

Author:
L.J. Weber

2 years ago

14.5k
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.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components