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

Feature cards with icons on top

Manon Daniel

3 years ago

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

Matti

1 year ago

3.1k
Feature Highlights cards

Carla Hoffman

2 years ago

3.1k
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

1.1k
Product feature section
Showcase product features with an image

Anonymous

3 years ago

14.7k
Features grid with icon

Freja Jensen

3 years ago

11.7k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Layout switcher with tailwindcss and alpinejs

Michael Andreuzza

2 years ago

1.5k
Key Features
Showcase Key Features of your app

Anonymous

2 years ago

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

Nikita

2 years ago

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.3k
Feature section - Htmlwind
Three columns with icons

Htmlwind

1 year ago

1.2k