Typical feature

This tailwind example is contributed by Matti, on 06-Dec-2024. 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.9k 6

Fork Fullscreen

<section class="w-full bg-white dark:bg-gray-700 my-24">
  <div class="w-full sm:w-[90%] md:w-4/5 c-w-3xl-66 mx-auto flex flex-col md:flex-row">
    <div class="relative basis-1/2 text-center md:!text-left px-2 py-0 md:py-6 self-center">
      <h1 class="text-4xl md:text-5xl font-semibold text-gray-800 dark:text-white">
          The <span class="text-emerald-600"> Feature</span> of ...
      </h1>
      <p class="w-full px-3 md:!px-0 md:pr-8 text-normal md:text-xl dark:text-white my-6">
        One of a lot of features is that's free for ever. 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.
      </p>
    </div>
    <div class="w-full md:w-1/2 flex flex-col flex-wrap md:flex-row pl-4 pr-2">
        <div class="w-full xl:w-1/2 flex flex-row mt-6 md:!mt-0">
            <div class="w-2/12">
              <img src="https://placehold.co/75x75" alt="" title="" class="w-[75px] h-[75px]" />
            </div>
            <div class="w-10/12 pl-4">
              <h1 class="text-xl md:text-3xl font-semibold text-gray-800 dark:text-white">Free</h1>
              <p class="w-full pr-4 text-normal mt-2 dark:text-white">
                This component is free and you can use it however you want. Copy, paste and modify it for you project.
              </p>
            </div>
        </div>
        <div class="w-full xl:w-1/2 flex flex-row mt-6 md:!mt-0">
            <div class="w-2/12">
              <img src="https://placehold.co/75x75" alt="" title="" class="w-[75px] h-[75px]" />
            </div>
            <div class="w-10/12 pl-4">
              <h1 class="text-xl md:text-3xl font-semibold text-gray-800 dark:text-white">Dark Mode</h1>
              <p class="w-full pr-4 text-normal mt-2 dark:text-white">
                It self is dark mode compatible. Adjust the dark mode colors for your projects and you're ready.
              </p>
            </div>
        </div>
        <div class="w-full xl:w-1/2 flex flex-row mt-6 md:mt-12">
            <div class="w-2/12">
              <img src="https://placehold.co/75x75" alt="" title="" class="w-[75px] h-[75px]" />
            </div>
            <div class="w-10/12 pl-4">
              <h1 class="text-xl md:text-3xl font-semibold text-gray-800 dark:text-white">Customizable</h1>
              <p class="w-full pr-4 text-normal mt-2 dark:text-white">
                Change the text-size, colors or add some items. It's free and customizable!
              </p>
            </div>
        </div>
        <div class="w-full xl:w-1/2 flex flex-row mt-6 md:mt-12">
            <div class="w-2/12">
              <img src="https://placehold.co/75x75" alt="" title="" class="w-[75px] h-[75px]" />
            </div>
            <div class="w-10/12 pl-4">
              <h1 class="text-xl md:text-3xl font-semibold text-gray-800 dark:text-white">Tailwindflex</h1>
              <p class="w-full pr-4 text-normal mt-2 dark:text-white">
                A great site where you can share all your components which each other and around the world.
              </p>
            </div>
        </div>
    </div>
  </div>
</section>

Related Examples

Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Mike Varen

2 years ago

4.8k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
Feature tiles

Nishant Trivedi

3 years ago

15.2k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Banshee

1 year ago

3.6k
interactive testimonial with Tailwind CSS and Alpine.js

Michael Andreuzza

2 years ago

2.9k
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

4.1k
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

1.1k
Highlights - Speakers Section

ABDO-SY

1 year ago

1.4k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
free tailwind personal portfolio template
free tailwind personal portfolio template

Geoffrey Callaghan

2 years ago

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

10 months ago

1.2k
Features showcase section
showcase key features and benefits

Mereani Waqa

2 years ago

7.8k