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

134

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

Feature Cards
w/ large icons

Author:
Mr Robot

2 years ago

8.1k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

7 months ago

2.5k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

6 months ago

759
Key Features
Showcase Key Features of your app

Author:
Anonymous

5 months ago

354
Features list with images and description

Author:
Noah Schmidt

1 year ago

12.1k
Feature cards
Feature showcase

Author:
Steven Kuhn

2 years ago

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

2 weeks ago

44
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

11.9k
Feature tiles

Author:
Nishant Trivedi

1 year ago

11.3k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

6 months ago

1.4k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

1 year ago

8.4k
What is Webby
A showcase feature

Author:
Developer Kwame

5 months ago

833

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components