Feature, Showcase

This tailwind example is contributed by Matti, on 02-Jan-2025. 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.6k 5

Fork Fullscreen

<div class="w-full flex flex-col md:flex-row py-24 dark:bg-gray-800">
  <div class="flex flex-col md:flex-row md:w-4/5 xl:w-3/5 mx-auto">
    <div class="w-full px-4 md:!px-0 md:w-4/12 flex-col md:w-8/12">
      <div class="flex flex-col md:flex-row w-full items-center">
        
        <img src="https://images.unsplash.com/photo-1628744876497-eb30460be9f6?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             class="flex-auto w-full md:w-1/3 md:pr-4 md:left-0" title="" alt="" />
        
        <img src="https://images.unsplash.com/photo-1628745750131-e5cfc5e70ced?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             class="hidden md:inline flex-auto md:w-1/3 md:pr-4 mx-auto" title="" alt="" />
        
        <img src="https://images.unsplash.com/photo-1628744876525-f2678d8af47f?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
             class="hidden md:inline flex-auto md:w-1/3 md:pr-4" title="" alt="" />
      </div>
      <div class="w-[90%] md:w-full mx-auto flex flex-col mt-4 md:!mt-0 md:flex-row">
        <div class="w-full lg:w-8/12 2xl:basis-6/12 my-6 pr-4">
          <h1 class="text-3xl mt-2 md:text-4xl font-semibold text-gray-800 dark:text-white">
            The <span class="text-emerald-600"> Feature</span> component
          </h1>
          <h3 class="text-xl mt-6 md:text-xl text-gray-800 dark:text-white">
            You can use this component as feature or as showcase. It's still be your choice.
          </h3>
          <p class="text-md mb-4 line-clamp-4 mt-2 md:line-clamp-none text-gray-500 dark:text-white">
            You can copy and paste it or modify however you want. Feel free to name the author in a hidden remark or to set the components as favorite. Optional you can
          </p>
          <button class="rounded-md border border-current dark:!border-emerald-500 bg-emerald-500 px-5 py-2 text-sm text-white hover:border-emerald-500 hover:bg-white hover:!text-gray-800">explore now</button>
        </div>
        <div class="hidden lg:inline w-4/12 pl-6 2xl:basis-6/12 my-6 items-center my-auto md:pr-4">
          
          <img src="https://images.unsplash.com/photo-1628745277866-ff9305ac52cc?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
              class="w-full md:right-0 md:max-w-none md:max-h-64 rounded-md" title="" alt="" />
        </div>
      </div>
    </div>
    <div class="w-full px-4 md:!px-0 md:w-4/12 flex-col md:pl-8">
      <h1 class="text-3xl mt-2 font-semibold text-gray-800 dark:text-white">
            The <span class="text-emerald-600"> Feature</span> component
      </h1>
      <h3 class="text-xl mt-3 md:text-normal text-gray-800 dark:text-white">
        You can use this component as feature or as showcase.
      </h3>
      <p class="text-md line-clamp-4 mt-2 md:line-clamp-none text-gray-500 dark:text-white">
        You can copy and paste it or modify however you want.<br class="hidden large-only" />Feel free to name the author in a hidden remark or to set the components as favorite.
      </p>
      
      <img src="https://images.unsplash.com/photo-1653972233229-1b8c042d6d8e?q=80&w=2664&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           class="w-full md:right-0 md:!max-h-64 my-4 rounded-sm" title="" alt="" />
      <div class="flex flex-row w-full items-center justify-items-center">
        <button class="rounded-md mx-auto border border-current dark:!border-emerald-500 bg-emerald-500 px-4 py-2 text-sm text-white hover:border-emerald-500 hover:bg-white hover:!text-gray-800">
          explore previous
        </button>
        <button class="rounded-md mx-3 border border-current dark:!border-emerald-500 bg-emerald-500 px-4 py-2 text-sm text-white hover:border-emerald-500 hover:bg-white hover:!text-gray-800">
          explore current
        </button>
        <button class="rounded-md mx-auto border border-current dark:!border-emerald-500 bg-emerald-500 px-4 py-2 text-sm text-white hover:border-emerald-500 hover:bg-white hover:!text-gray-800">
          explore next
        </button>
      </div>
    </div>

</div>
</div>

Related Examples

Product feature showccase section with images

R.P Ketan

3 years ago

16.9k
Features grid with icon

Freja Jensen

3 years ago

11.7k
Features showcase section
showcase key features and benefits

Mereani Waqa

2 years ago

7.6k
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
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Feature Cards
w/ large icons

Mr Robot

4 years ago

10.3k
Featured Items

Abdul Baset Bappy

1 year ago

1.4k
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
Responsive Features Section

ariaw

1 year ago

1.6k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Akram Khan

2 years ago

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

kzsamir849

2 years ago

2.7k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

2 years ago

10.1k