Components

Tailwind CSS Statistics & Analytics Components - Madhuranjan UI

Explore our collection of responsive and modern statistics components built with Tailwind CSS. Each design is crafted to display key metrics clearly and engagingly, perfect for dashboards and data insights.

All our components are fully responsive and perform flawlessly on every device.

All components are fully responsive and adapt to any screen size. While mobile previews may appear condensed, they will display perfectly on actual devices. Test them on Tailwind CSS Play. or resize your browser to see the responsiveness in action.

Simple Stats Card

A clean and minimal card for displaying essential statistics. Perfect for quick insights and dashboard summaries.

Users

1,234

Revenue

$56K

Orders

789

Reviews

123

1<div class="mx-auto max-w-7xl p-4">
2  <div class="flex flex-wrap items-center justify-center gap-5 p-4">
3    <div class="w-52 rounded-lg bg-white p-6 shadow dark:bg-gray-800">
4      <p class="text-sm text-gray-500 dark:text-gray-400">Users</p>
5      <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">1,234</p>
6    </div>
7    <div class="w-52 rounded-lg bg-white p-6 shadow dark:bg-gray-800">
8      <p class="text-sm text-gray-500 dark:text-gray-400">Revenue</p>
9      <p class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$56K</p>
10    </div>

Basic Statistics Display

Present your key data points in a straightforward layout that emphasizes clarity and simplicity.

350+
Certified Experts
1.2K+
Happy Clients
850+
Projects Completed
98%
Customer Satisfaction
1<section class="py-20 bg-white dark:bg-gray-900">
2  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
3    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-0">
4      <!-- Stat 1 -->
5      <div class="flex flex-col items-center p-6 lg:border-r border-gray-200 dark:border-gray-700">
6        <div class="font-bold text-4xl md:text-5xl text-indigo-600 dark:text-indigo-400 mb-3">
7          350+
8        </div>
9        <span class="text-lg md:text-xl text-gray-600 dark:text-gray-300 text-center font-medium">
10          Certified Professionals

Stats with Custom Colors

Showcase your metrics with a vibrant color palette that matches your brand identity and enhances visual appeal.

15M+

We’ve empowered over fifteen million people around the world, making their day-to-day tasks simpler and more efficient.

60M+

Our app is one of the top downloads on Google Play and the Apple App Store, providing a seamless user experience for everyone.

99%

We consistently achieve a 99% satisfaction rate, with users praising our intuitive design and reliable performance.

1<div class="mx-auto max-w-7xl px-4 py-10 bg-white dark:bg-gray-900">
2  <div class="flex flex-col md:flex-row items-start md:items-center justify-center gap-8 text-center">
3    <div class="md:w-1/3">
4      <h2 class="text-5xl font-extrabold text-purple-600">15M+</h2>
5      <p class="mt-3 text-gray-600 dark:text-gray-300">
6        We’ve empowered over fifteen million people around the world, making their day-to-day tasks simpler and more efficient.
7      </p>
8    </div>
9    <div class="md:w-1/3">
10      <h2 class="text-5xl font-extrabold text-purple-600">60M+</h2>

Stats with Indicator

Highlight key performance changes with indicators that quickly communicate trends and status updates.

Expert Consultants

260+

Active Clients

975+

Projects Delivered

724+

Orders in Queue

89+
1<div class="mx-auto max-w-7xl bg-white px-4 py-10 dark:bg-gray-900">
2  <div class="grid grid-cols-2 gap-8 text-center md:grid-cols-4">
3    <!-- Expert Consultants -->
4    <div>
5      <p class="mb-2 text-gray-500 dark:text-gray-400">Expert Consultants</p>
6      <div class="flex items-center justify-center space-x-2">
7        <span class="inline-block h-3 w-3 rounded-sm bg-purple-600"></span>
8        <span class="text-3xl font-bold text-gray-900 dark:text-white">260+</span>
9      </div>
10    </div>

Stats with Icons

Integrate icons with your data to create an engaging and intuitive visualization of your statistics.

260+
Ruby Experts
Sevelopers with 5+ years experience
975+
Next.js Projects
High-performance React applications
724+
Projects Delivered
On-time completion rate: 98%
1 <div class="flex justify-center items-center flex-wrap p-4 gap-4">
2
3       <div class="relative group p-4 w-72 rounded-2xl bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-800 dark:to-gray-700 border border-gray-100 dark:border-gray-700 transition-all hover:shadow-lg">
4        <div class="absolute top-6 right-6 w-14 h-14 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center shadow-sm">
5          <svg class="w-8 h-8 text-red-500" viewBox="0 0 24 24" fill="currentColor">
6            <path d="M20.156.083c3.033.525 3.893 2.598 3.829 4.77-.064 2.17-.887 3.332-2.602 3.467-1.98.146-3.263-1.485-2.913-3.442.425-2.344 1.34-4.356 1.686-4.795zM0 12.735c.136 3.104 1.17 5.785 3.547 6.875 2.378 1.088 6.632.907 9.353-.485 2.72-1.393 3.12-3.53 3.12-3.53s-1.393 1.988-4.532 3.104c-3.136 1.116-7.15 1.18-9.66-.122C.433 16.21 0 14.17 0 12.735zm6.635-2.512c-1.087 2.05-1.393 4.665-.995 6.295.4 1.63 1.53 3.442 4.122 3.665 2.594.22 4.33-1.95 4.15-4.05-.18-2.093-1.18-4.737-2.6-6.07-1.42-1.33-3.34-1.93-4.677-.84zm15.822 2.53c1.53 1.77 1.82 4.88.658 6.29-1.16 1.41-3.462 1.66-4.84.25-1.38-1.41-1.61-4.23-.41-6.08 1.2-1.85 3.35-2.3 4.6-.46zM12 22.02c5.407 0 9.79-4.373 9.79-9.767S17.407 2.48 12 2.48 2.21 6.853 2.21 12.253 6.593 22.02 12 22.02z"/>
7          </svg>
8        </div>
9        <div class="text-5xl font-bold text-gray-800 dark:text-white mb-2">260+</div>
10        <div class="text-lg font-medium text-gray-600 dark:text-gray-300">Ruby Experts</div>

Horizontal Stats Layout

Display your statistics in a horizontal format that allows for side-by-side comparisons and enhanced readability.

Our results in numbers

Using the following Tailwind CSS Stats you can show stats, heading, and description horizontally.

240%

Company growth

Company's remarkable growth journey as we continually innovate and drive towards new heights of success.

175+

Team members

Our very talented team members are the powerhouse of Pagedone and pillars of our success.

625+

Projects Completed

We have accomplished more than 625 projects worldwide and we are still counting many more.

1 <section class="py-5 bg-gray-50 dark:bg-gray-900">
2  <div class=" mx-auto px-4 text-center">
3    <h2 class="text-3xl md:text-4xl font-extrabold text-gray-800 dark:text-white">
4      Our results in numbers
5    </h2>
6    <p class="mt-2 text-gray-600 dark:text-gray-300">
7      Using the following Tailwind CSS Stats you can show stats, heading, and description horizontally.
8    </p>
9
10    <div class="mt-10 flex justify-center items-center gap-5 flex-wrap">

Stats with Trending Numbers

Emphasize key trends and performance shifts with dynamic, attention-grabbing number displays.

Revenue+4.53%
$405,097.00
Overdue invoices+14.06%
$12,787.00
Outstanding invoices-1.93%
$245,988.00
Expenses+10.08%
$30,156.00
1  <div class="mx-auto p-3">
2    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 dark:bg-black">
3      <div class="grid grid-cols-1 divide-y divide-gray-200 md:grid-cols-4 md:divide-x md:divide-y-0 dark:divide-gray-700">
4         <div class="p-6">
5          <div class="flex items-center justify-between">
6            <span class="text-sm text-gray-500 dark:text-gray-400">Revenue</span>
7            <span class="text-xs font-semibold text-green-500">+4.53%</span>
8          </div>
9          <div class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">$405,097.00</div>
10        </div>
PaginationRating