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

Matti

1 year ago

1.6k
Products Layout
An ecommerce store front product list layout

Developer Kwame

1 year ago

1.1k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

233
Highlights - Speakers Section

ABDO-SY

1 year ago

1.4k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
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
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
Features grid

Sophia Baker

3 years ago

10.8k
Features grid with icon

Freja Jensen

3 years ago

11.7k
Features Component

KULDEEP

1 year ago

1.5k
beautiful tailwind contact form
beautiful tailwind contact form

Geoffrey Callaghan

2 years ago

6.5k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

SHARIFUL ISLAM

1 year ago

2.8k