Home
Matti
Feature, Showcase

Feature, Showcase

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

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 Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Author:
Elsabe Fourie

2 years ago

9.4k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

1 year ago

2.3k
Features section
Showcase your key features

Author:
Manon Daniel

3 years ago

16.9k
Features list template

Author:
Lukas Müller

3 years ago

11.3k
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Author:
Matti

1 year ago

1.7k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

1 year ago

2.6k
Highlights - Speakers Section

Author:
ABDO-SY

11 months ago

884
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

2 years ago

5.4k
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.9k
Features section

Author:
ariaw

4 months ago

272
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

17.2k
Simple Features section

Author:
Odessa Young

2 years ago

17.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components