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

276

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

Layout switcher with tailwindcss and alpinejs

Author:
Michael Andreuzza

8 months ago

610
Feature cards

Author:
Fagundo67

1 year ago

10k
Tailwind css feature cards

Author:
Kofi Osei

2 years ago

10.2k
Features section
Showcase your key features

Author:
Manon Daniel

1 year ago

14.2k
Feature Highlights cards

Author:
Carla Hoffman

9 months ago

1.6k
Animated cards

Author:
Michael Andreuzza

8 months ago

3.9k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

13.5k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

4 months ago

1.3k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

7 months ago

957
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.2k
Simple Features section

Author:
Odessa Young

1 year ago

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

1 month ago

335

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components