Facts

A simple facts overview

This tailwind example is contributed by Matti, on 02-Dec-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase

Author Matti

Tailwind v3.4 2.5k 6

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

Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

4 years ago

26.7k
Layout switcher with tailwindcss and alpinejs

Michael Andreuzza

2 years ago

1.5k
Features grid example
Tailwind clean and responsive features section with the heading

Alok

3 years ago

14.6k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.6k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.2k
Product Feature Section
present multiple product features in a grid layout. Each feature is represented by an icon, title, and description.

Elsabe Fourie

2 years ago

10k
Feature, Showcase

Matti

1 year ago

1.6k
Features

Matti

1 year ago

1.7k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Siva Naga Malleswararao Kurakula

1 year ago

2.2k
Simple Features section

Odessa Young

3 years ago

17.8k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
Responsive Features Cards Section
A modern and fully responsive services section featuring premium glassmorphism cards, interactive hover effects, smooth animations, and a clean multi-column grid layout. Perfect for SaaS, startups, agencies, portfolios, business websites, and landing pages. Built with semantic HTML and easy-to-customize CSS for seamless integration into any modern web project.

JUGENDRA GANGWAR

3 months ago

251