Features

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

Feature showcase

Author Matti

Tailwind v3.4 1.7k 4

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

Features Component

KULDEEP

1 year ago

1.5k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

942
Features

Michael Andreuzza

2 years ago

5.7k
Feature Showcase
Showcase Features of your product

Prashant

4 years ago

11.9k
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

150
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Matti

1 year ago

1.9k
Animated Feature Grid Component with Tailwind CSS
Animated feature grid component built with Tailwind CSS. Features smooth hover animations, gradient cards, dark mode support, and responsive design. Perfect for showcasing product features.

Homayoun

9 months ago

1.2k
Highlights - Speakers Section

ABDO-SY

1 year ago

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

Alok

3 years ago

26.7k
Feature Section
A section that allows you to share features about your product and an example of your product

Andrew Weisbeck

2 years ago

2.8k
free tailwind personal portfolio template
free tailwind personal portfolio template

Geoffrey Callaghan

2 years ago

5.9k