Home
Matti
Typical feature

Typical feature

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

<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

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

Author:
Matti

1 year ago

2.3k
Product feature showccase section with images

Author:
R.P Ketan

2 years ago

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

Author:
Mike Varen

1 year ago

3.8k
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

1 year ago

5.3k
Highlights - Speakers Section

Author:
ABDO-SY

8 months ago

704
Feature cards

Author:
Fagundo67

2 years ago

11k
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.4k
Product feature section
Showcase product features with an image

Author:
Anonymous

2 years ago

13.9k
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Author:
Matti

11 months ago

1.1k
Features
A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

Author:
SAURAV SINGH

5 months ago

345
Feature section - Htmlwind
Three columns with icons

Author:
Htmlwind

6 months ago

595

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components