Simple Grid

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <section class="bg-white py-16 px-4 text-center">
      <div class="max-w-7xl mx-auto">
        <h2 class="text-4xl font-semibold text-gray-900 mb-4 md:text-5xl">
          Trusted by creators worldwide
        </h2>
        <p class="text-gray-500 mb-12">
          Lorem ipsum dolor sit amet consect adipisicing possimus.
        </p>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-1">
          <div class="bg-gray-100 rounded-xl py-8 px-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-600">
                Creators on the platform
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
              >
                8,000+
              </dd>
            </div>
          </div>
          <div class="bg-gray-100 rounded-xl py-8 px-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-600">
                Flat platform fee
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
              >
                3%
              </dd>
            </div>
          </div>
          <div class="bg-gray-100 rounded-xl py-8 px-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-600">
                Uptime guarantee
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
              >
                99.9%
              </dd>
            </div>
          </div>
          <div class="bg-gray-100 rounded-xl py-8 px-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-600">
                Paid out to creators
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
              >
                $70M
              </dd>
            </div>
          </div>
        </div>
      </div>
    </section>

Simple On Dark

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <div class="bg-gray-950 py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <dl
          class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3"
        >
          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
            <dt class="text-base/7 text-gray-500">
              Transactions every 24 hours
            </dt>
            <dd
              class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
            >
              44 million
            </dd>
          </div>
          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
            <dt class="text-base/7 text-gray-500">Assets under holding</dt>
            <dd
              class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
            >
              $119 trillion
            </dd>
          </div>
          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
            <dt class="text-base/7 text-gray-500">New users annually</dt>
            <dd
              class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
            >
              46,000
            </dd>
          </div>
        </dl>
      </div>
    </div>

Simple

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <dl
          class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3"
        >
          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
            <dt class="text-base/7 text-gray-600">
              Transactions every 24 hours
            </dt>
            <dd
              class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
            >
              44 million
            </dd>
          </div>
          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
            <dt class="text-base/7 text-gray-600">Assets under holding</dt>
            <dd
              class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
            >
              $119 trillion
            </dd>
          </div>
          <div class="mx-auto flex max-w-xs flex-col gap-y-4">
            <dt class="text-base/7 text-gray-600">New users annually</dt>
            <dd
              class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
            >
              46,000
            </dd>
          </div>
        </dl>
      </div>
    </div>

Steeped

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <section class="bg-white dark:bg-gray-900 px-6 py-12">
      <div class="max-w-7xl mx-auto">
        <!-- Heading -->
        <div class="mb-12 text-center md:text-left">
          <h2
            class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white leading-tight"
          >
            We approach work as a place to <br class="hidden md:block" />
            make the world better
          </h2>
          <p class="mt-4 text-lg text-gray-500 dark:text-gray-400 max-w-2xl">
            Diam nunc lacus lacus aliquam turpis enim. Eget hac velit est
            euismod lacus. Est non placerat nam arcu. Cras purus nibh cursus sit
            eu in id. Integer vel nibh.
          </p>
        </div>

        <!-- Stats Cards -->
        <div class="flex flex-col md:flex-row gap-6 md:items-end md:h-[400px]">
          <!-- Pillar 1 (small height) -->
          <div
            class="bg-gray-100 rounded-2xl p-6 w-full md:max-w-sm flex flex-col"
          >
            <h3
              class="text-lg font-semibold text-gray-900 mb-2 order-1 md:order-2"
            >
              Users on the platform
            </h3>
            <p class="text-sm text-gray-600 order-2 md:order-3">
              Vel labore deleniti veniam consequuntur sunt nobis.
            </p>
            <p
              class="text-4xl font-bold text-gray-900 md:mb-8 mt-8 md:mt-0 order-3 md:order-1"
            >
              250k
            </p>
          </div>

          <!-- Pillar 2 (tallest) -->
          <div
            class="bg-gray-900 text-white rounded-2xl p-6 w-full md:max-w-sm flex flex-col"
          >
            <h3 class="text-lg font-semibold mb-2 md:order-2">
              We’re proud that our customers have made over $8 billion in total
              revenue.
            </h3>
            <p class="text-sm text-gray-400 md:order-3">
              Eu duis porta aliquam ornare. Elementum eget magna egestas.
            </p>
            <p class="text-4xl font-bold md:mb-48 mt-8 md:mt-0 md:order-1">
              $8.9 billion
            </p>
          </div>

          <!-- Pillar 3 (medium height) -->
          <div
            class="bg-indigo-600 text-white rounded-2xl p-6 w-full md:max-w-sm flex flex-col"
          >
            <h3 class="text-lg font-semibold mb-2 md:order-2">
              Transactions this year
            </h3>
            <p class="text-sm text-indigo-200 md:order-3">
              Eu duis porta aliquam ornare. Elementum eget magna egestas. Eu
              duis porta aliquam ornare.
            </p>
            <p class="text-4xl font-bold md:mb-32 mt-8 md:mt-0 md:order-1">
              401,093
            </p>
          </div>
        </div>
      </div>
    </section>

Timeline

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <div class="bg-white py-16 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-10 pt-10">
          <!-- Item 1 -->
          <div>
            <div class="flex items-center justify-between">
              <!-- Left: Date Label -->
              <p class="text-sm text-indigo-600 font-semibold mt-2 mb-2">
                • Aug 2021
              </p>

              <!-- Right: Line and Bullet -->
              <div class="flex items-center gap-2 flex-grow ml-4">
                <!-- Line -->
                <div class="h-[1px] bg-gray-200 rounded-full w-full"></div>

                <!-- Bullet Point -->
                <div class="text-sm text-indigo-600">•</div>
              </div>
            </div>

            <h3 class="text-lg font-semibold text-gray-900">Founded company</h3>
            <p class="mt-2 text-sm text-gray-600">
              Nihil aut nam. Dignissimos a pariatur et quos omnis. Aspernatur
              asperiores et dolorem dolorem optio voluptate repudiandae.
            </p>
          </div>

          <!-- Item 2 -->
          <div>
            <div class="flex items-center justify-between">
              <!-- Left: Date Label -->
              <p class="text-sm text-indigo-600 font-semibold mt-2 mb-2">
                Dec 2021
              </p>

              <!-- Right: Line and Bullet -->
              <div class="flex items-center gap-2 flex-grow ml-4">
                <!-- Line -->
                <div class="h-[1px] bg-gray-200 rounded-full w-full"></div>

                <!-- Bullet Point -->
                <div class="text-sm text-indigo-600">•</div>
              </div>
            </div>
            <h3 class="text-lg font-semibold text-gray-900">
              Secured $65m in funding
            </h3>
            <p class="mt-2 text-sm text-gray-600">
              Provident quia ut esse. Vero vel eos repudiandae aspernatur.
              Cumque minima impedit sapiente a architecto nihil.
            </p>
          </div>

          <!-- Item 3 -->
          <div>
            <div class="flex items-center justify-between">
              <!-- Left: Date Label -->
              <p class="text-sm text-indigo-600 font-semibold mt-2 mb-2">
                Feb 2022
              </p>

              <!-- Right: Line and Bullet -->
              <div class="flex items-center gap-2 flex-grow ml-4">
                <!-- Line -->
                <div class="h-[1px] bg-gray-200 rounded-full w-full"></div>

                <!-- Bullet Point -->
                <div class="text-sm text-indigo-600">•</div>
              </div>
            </div>

            <h3 class="text-lg font-semibold text-gray-900">Released beta</h3>
            <p class="mt-2 text-sm text-gray-600">
              Sunt perspiciatis incidunt. Non necessitatibus aliquid.
              Consequatur ut officiis earum eum quia facilis. Hic deleniti
              dolorem quia et.
            </p>
          </div>

          <!-- Item 4 -->
          <div>
            <div class="flex items-center justify-between">
              <!-- Left: Date Label -->
              <p class="text-sm text-indigo-600 font-semibold mt-2 mb-2">
                Dec 2022
              </p>

              <!-- Right: Line and Bullet -->
              <div class="flex items-center gap-2 flex-grow ml-4">
                <!-- Line -->
                <div class="h-[1px] bg-gray-200 rounded-full w-full"></div>

                <!-- Bullet Point -->
                <div class="text-sm text-indigo-600">•</div>
              </div>
            </div>
            <h3 class="text-lg font-semibold text-gray-900">
              Global launch of product
            </h3>
            <p class="mt-2 text-sm text-gray-600">
              Ut ipsa sint distinctio quod itaque nam qui. Possimus aut unde id
              architecto voluptatem hic aut pariatur velit.
            </p>
          </div>
        </div>
      </div>
    </div>

With Background

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <div
      class="relative bg-cover bg-center text-white min-h-[500px] bg-[url('/img/bg.png')]"
    >
      <div class="relative z-10 max-w-7xl mx-auto px-6 py-24">
        <p class="text-blue-400 text-sm font-semibold mb-2">Our track record</p>
        <h2 class="text-4xl font-semibold text-gray-100 mb-4 md:text-5xl">
          Trusted by creators worldwide
        </h2>
        <p class="text-lg text-gray-300 max-w-2xl mb-10">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
          impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.
        </p>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-1">
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">
                Creators on the platform
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                8,000+
              </dd>
            </div>
          </div>
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">
                Flat platform fee
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                3%
              </dd>
            </div>
          </div>
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">
                Uptime guarantee
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                99.9%
              </dd>
            </div>
          </div>
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">
                Paid out to creators
              </dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                $70M
              </dd>
            </div>
          </div>
        </div>
      </div>
    </div>

With Two Columns description

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <div class="bg-gray-900 text-white px-6 py-16">
      <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <p class="text-indigo-400 font-semibold">Deploy faster</p>
        <h2 class="text-4xl font-bold tracking-tight sm:text-5xl mt-2 mb-8">
          A better workflow
        </h2>

        <!-- Two Column Text Section -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-gray-300">
          <div>
            <p>
              Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus
              enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor
              praesent donec est. Odio penatibus risus viverra tellus varius sit
              neque erat velit. Faucibus commodo massa rhoncus, volutpat.
              Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae
              sed turpis id.
            </p>
            <p class="mt-4">
              Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis
              odio id et. Id blandit molestie auctor fermentum dignissim. Lacus
              diam tincidunt ac cursus in vel. Mauris varius vulputate et
              ultrices hac adipiscing egestas.
            </p>
          </div>
          <div>
            <p>
              Erat pellentesque dictumst ligula porttitor risus eget et eget.
              Ultricies tellus felis id dignissim eget. Est augue maecenas risus
              nulla ultrices congue nunc tortor. Enim et nesciunt doloremque
              nesciunt voluptate.
            </p>
            <p class="mt-4">
              Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis
              odio id et. Id blandit molestie auctor fermentum dignissim. Lacus
              diam tincidunt ac cursus in vel. Mauris varius vulputate et
              ultrices hac adipiscing egestas. Iaculis convallis ac tempor et
              ut. Ac lorem vel integer orci.
            </p>
          </div>
        </div>

        <!-- Stats Section -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-1 mt-20">
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10 mb-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">Founded</dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                2021
              </dd>
            </div>
          </div>
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10 mb-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">Employees</dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                37
              </dd>
            </div>
          </div>
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10 mb-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">Countries</dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                12
              </dd>
            </div>
          </div>
          <div class="py-8 px-4 border-l-1 border-gray-700 pl-10 mb-4">
            <div class="mx-auto flex max-w-xs flex-col gap-y-4">
              <dt class="text-base/7 font-semibold text-gray-100">Raised</dt>
              <dd
                class="order-first text-3xl font-semibold tracking-tight text-gray-100 sm:text-5xl"
              >
                $25M
              </dd>
            </div>
          </div>
        </div>

        <!-- Footer -->
      </div>
    </div>

Split With image

With Responsive Design

Stats Section in Tailwind CSS

                    
                        
                      <div class="grid grid-cols-1 lg:grid-cols-2 min-h-screen">
      <!-- Left: Background Image -->
      <div
        class="bg-cover bg-center min-h-[300px] lg:min-h-full bg-[url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2850&q=80')]"
      ></div>

      <!-- Right: Content -->
      <div class="flex items-center justify-center p-8 lg:p-16 bg-white">
        <div class="max-w-xl">
          <p class="text-blue-600 text-sm font-semibold mb-2">
            Our track record
          </p>
          <h2 class="text-4xl font-bold text-gray-900 mb-4 md:text-5xl">
            Trusted by thousands of <br />
            creators worldwide
          </h2>
          <p class="text-gray-600 text-lg mb-10">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
            impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis
            ratione.
          </p>

          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-1">
            <div class="py-8 px-4 border-l-1 border-gray-200 pl-10 mb-6">
              <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt class="text-base/7 font-semibold text-gray-600">
                  Creators on the platform
                </dt>
                <dd
                  class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
                >
                  8,000+
                </dd>
              </div>
            </div>
            <div class="py-8 px-4 border-l-1 border-gray-200 pl-10 mb-6">
              <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt class="text-base/7 font-semibold text-gray-600">
                  Flat platform fee
                </dt>
                <dd
                  class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
                >
                  3%
                </dd>
              </div>
            </div>
            <div class="py-8 px-4 border-l-1 border-gray-200 pl-10 mb-6">
              <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt class="text-base/7 font-semibold text-gray-600">
                  Uptime guarantee
                </dt>
                <dd
                  class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
                >
                  99.9%
                </dd>
              </div>
            </div>
            <div class="py-8 px-4 border-l-1 border-gray-200 pl-10 mb-6">
              <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt class="text-base/7 font-semibold text-gray-600">
                  Paid out to creators
                </dt>
                <dd
                  class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
                >
                  $70M
                </dd>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>