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

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