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

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 Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

2 years ago

24.1k
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Author:
Matti

9 months ago

1.3k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.9k
Responsive Features section

Author:
Piet Vriend

2 years ago

10.5k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

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

Author:
Matti

8 months ago

2k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.2k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

1 year ago

7.1k
Feature Showcase
Showcase Features of your product

Author:
Prashant

3 years ago

11.1k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
Responsive Features Section

Author:
ariaw

5 months ago

484
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

2 months ago

456

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components