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.5k

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

Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

387
Features

Author:
Michael Andreuzza

1 year ago

5.3k
Service section

Author:
inbarajan P

1 year ago

2.1k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.4k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

3 years ago

10.6k
Feature section - Htmlwind
Three columns with icons

Author:
Htmlwind

9 months ago

770
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

7 months ago

586
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.4k
Feature showcase cards

Author:
Lukas Müller

3 years ago

14.2k
Basic features section
Display your most important features

Author:
Dipti narayan

2 years ago

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

2 years ago

5.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components