Stats Section Using Tailwind UI

A stats section designed with Tailwind offers a visually impactful and organized display of key statistics or data, making it easy for users to grasp essential information at a glance. Component Inspired design by Ildiko Gaspar from dribbble.

section

Loading component...

index.html

77 lines

<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/12272731-Stats-UI-Design  -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

<section class="bg-gradient-to-r from-indigo-800 to-indigo-600">
  <section class="text-gray-600 body-font">
    <div class="container flex flex-wrap px-5 py-10 mx-auto">
      <div class="flex flex-wrap content-start mt-auto mb-auto -mx-4 lg:w-1/2 sm:w-2/3 sm:pr-10">
        <div class="w-full px-4 mb-6 sm:p-4">
          <h1 class="mb-4 text-3xl font-medium text-white title-font sm:text-4xl">Marketing</h1>
          <div class="leading-relaxed text-gray-300 sm:text-lg">Elevate your marketing campaigns, with
            connective
            creative unlike any other - that continuously convert:
            driving reach and revenuo way up.</div>
          <button
            class="px-8 py-3 mt-6 text-sm text-white uppercase bg-purple-500 rounded sm:mt-12 sm:text-lg sm:py-5 bg-opacity-40">Read
            our
            cases</button>
        </div>

      </div>
      <div class="w-full mt-6 overflow-hidden text-gray-100 rounded-lg lg:w-1/2 sm:w-1/3 sm:mt-0 sm:divide-y">
        <div class="flex flex-col items-center duration-300 sm:py-6 sm:flex-row sm:divide-x">
          <div class="px-12 py-8 text-center">
            <h6 class="text-4xl font-bold text-deep-purple-accent-400 sm:text-5xl">
              82%
            </h6>
            <p class="text-center md:text-base">
              Lorem ipsum dolor adipiscing sit amet, consectetur elit.
            </p>
          </div>
          <div class="px-12 py-8 text-center">
            <h6 class="text-4xl font-bold text-deep-purple-accent-400 sm:text-5xl">
              106.5K
            </h6>
            <p class="text-center md:text-base">
              Lorem ipsum elit consectetur sit amet, adipiscing dolor.
            </p>
          </div>

        </div>

        <div class="flex flex-col items-center duration-300 sm:py-6 sm:flex-row sm:divide-x">
          <div class="px-12 py-8 text-center">
            <h6 class="text-4xl font-bold text-deep-purple-accent-400 sm:text-5xl">
              82%
            </h6>
            <p class="text-center md:text-base">
              Lorem ipsum dolor adipiscing sit amet, consectetur elit.
            </p>
          </div>
          <div class="px-12 py-8 text-center">
            <h6 class="text-4xl font-bold text-deep-purple-accent-400 sm:text-5xl">
              106.5K
            </h6>
            <p class="text-center md:text-base">
              Lorem ipsum elit consectetur sit amet, adipiscing dolor.
            </p>
          </div>

        </div>

      </div>
    </div>
  </section>

</section>

Stats Section Using Tailwind UI

Preview - Stats Section Using Tailwind UI