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

Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

7 months ago

1.4k
Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

2 years ago

9.2k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

2 years ago

12.2k
Features list with icons

Author:
L.J. Weber

2 years ago

14k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

669
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

175
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

5k
Feature showcase cards

Author:
Lukas Müller

2 years ago

13.9k
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.6k
Layout switcher with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

961
Basic features section
Display your most important features

Author:
Dipti narayan

2 years ago

7.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components