Home
dev-fab250
Dashboard Stats Widget

Dashboard Stats Widget

Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

This tailwind example is contributed by dev-fab250, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Widget

Author dev-fab250

1.7k

Fork Fullscreen

<div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      
      
      <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 border-blue-500">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">Total Revenue</p>
            <h3 class="text-2xl font-bold mt-1 text-gray-800">$24,780</h3>
          </div>
          <div class="bg-blue-100 p-2 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        </div>
        <div class="mt-4 flex items-center">
          <span class="text-green-500 text-sm font-medium flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
            +12.5%
          </span>
          <span class="text-gray-500 text-sm ml-2">vs last month</span>
        </div>
      </div>

<div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 border-green-500">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">Active Users</p>
            <h3 class="text-2xl font-bold mt-1 text-gray-800">1,429</h3>
          </div>
          <div class="bg-green-100 p-2 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
          </div>
        </div>
        <div class="mt-4 flex items-center">
          <span class="text-green-500 text-sm font-medium flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
            +8.2%
          </span>
          <span class="text-gray-500 text-sm ml-2">vs last month</span>
        </div>
      </div>

<div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 border-purple-500">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">Conversion Rate</p>
            <h3 class="text-2xl font-bold mt-1 text-gray-800">3.42%</h3>
          </div>
          <div class="bg-purple-100 p-2 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
        </div>
        <div class="mt-4 flex items-center">
          <span class="text-red-500 text-sm font-medium flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
            -1.1%
          </span>
          <span class="text-gray-500 text-sm ml-2">vs last month</span>
        </div>
      </div>

<div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 border-amber-500">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">Avg. Session</p>
            <h3 class="text-2xl font-bold mt-1 text-gray-800">4m 32s</h3>
          </div>
          <div class="bg-amber-100 p-2 rounded-lg">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        </div>
        <div class="mt-4 flex items-center">
          <span class="text-green-500 text-sm font-medium flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
            +2.4%
          </span>
          <span class="text-gray-500 text-sm ml-2">vs last month</span>
        </div>
      </div>
    </div>
  </div>

Related Examples

Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.6k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

2.6k
nextjs-profile-card-tailwind

Author:
Tailwind Free Snippets

1 year ago

1.9k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

2 months ago

429
Simple Profile Card.
Profile page with basic informations

Author:
Sedat Kumcu

1 year ago

2.9k
Card section
Card section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.1k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

11 months ago

1.7k
Group hover card
article card

Author:
Sienna

3 years ago

11.6k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

11 months ago

2.1k
avtarCard3

Author:
pablitodgb

6 months ago

979
cards
cards slices

Author:
Anonymous

2 years ago

6.9k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

2 months ago

85

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components