Home
Matti
Facts

Facts

A simple facts overview

This tailwind example is contributed by Matti, on 02-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.1k

Fork Fullscreen

<section class="w-full dark:bg-gray-700">
  <div class="w-full md:w-3/5 mx-auto">
    <div class="w-full flex flex-col text-center pt-12 md:pt-24">
      <h1 class="text-4xl md:text-5xl font-semibold text-gray-800 dark:text-white">
          Create your <span class="text-emerald-600">new component</span>
      </h1>
      <p class="w-full px-[12%] text-sm md:text-xl whitespace-pre-line dark:text-white">
        Here on <span class="text-emerald-600">tailwindflex</span>.com you've all you need to build your own <br class="hidden lg:inline" /> components, new templates and share your fantastic results with everyone &#8212; if you want  
      </p>
    </div>
    <div class="flex flex-col md:flex-row px-2 md:px-6 md:pb-24 md:mt-12  dark:text-white">
        <div class="w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col">
          <p class="text-sm md:text-xl font-normal md:font-thin">Components</p>
          <h1 class="text-4xl md:text-5xl font-semibold">1000+</h1>
        </div>   
        <div class="w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col">
          <p class="text-sm md:text-xl font-normal md:font-thin">Daily visits</p>
          <h1 class="text-4xl md:text-5xl font-semibold">57</h1>
        </div>   
        <div class="w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col">
          <p class="text-sm md:text-xl font-normal md:font-thin">Followers</p>
          <h1 class="text-4xl md:text-5xl font-semibold">21 Mio</h1>
        </div>   
        <div class="w-full md:w-1/4 py-6 px-6 md:mr-6 text-center flex flex-col">
          <p class="text-sm md:text-xl font-normal md:font-thin">Coffee drunk</p>
          <h1 class="text-4xl md:text-5xl font-semibold">921 L</h1>
        </div>        
    </div>
  </div>
</section>

Related Examples

Features showcase section
showcase key features and benefits

Author:
Mereani Waqa

1 year ago

6.6k
services section
services section by amr kilany

Author:
Amr Kilany

1 month ago

122
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

9.7k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

5 months ago

686
Hotel rooms
A simple room overview

Author:
Matti

7 months ago

1k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

14.9k
Animated cards

Author:
Michael Andreuzza

1 year ago

5.9k
Features grid

Author:
Sophia Baker

2 years ago

9.8k
Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

1 year ago

9k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

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

1 year ago

1.7k
Features grid with icon

Author:
Freja Jensen

2 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components