KPI Cards

estilo Shopify / Stripe

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 17-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Card Dashboard

Author Raul antonio de la cruz hernandez

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KPI Cards estilo Shopify / Stripe</title>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-start mb-8">
                    <p class="text-sm text-gray-600 font-medium">Total orders</p>
                    <div class="flex items-center text-green-600 text-sm font-medium">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" />
                        </svg>
                        56.4%
                        <span class="text-gray-500 ml-1">Past 30 days</span>
                    </div>
                </div>

<div class="mb-2">
                    <span class="text-4xl font-bold text-gray-900">1,054</span>
                    <span class="text-green-600 text-sm font-medium ml-3">+330 today</span>
                </div>
            </div>

<div class="relative">
                <canvas id="chart-orders" class="sparkline-canvas"></canvas>
                <div class="absolute bottom-4 right-6 text-xs text-gray-400">
                    <span class="inline-block w-2 h-2 bg-green-500 rounded-full mr-1"></span>
                    20 total • 04 Apr, 2025
                </div>
            </div>
        </div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-6">
                <div class="flex justify-between items-start mb-8">
                    <p class="text-sm text-gray-600 font-medium">Unfulfilled</p>
                    <div class="flex items-center text-red-600 text-sm font-medium">
                        <svg class="w-4 h-4 mr-1 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" />
                        </svg>
                        21.8%
                        <span class="text-gray-500 ml-1">Past 30 days</span>
                    </div>
                </div>

<div class="mb-2">
                    <span class="text-4xl font-bold text-gray-900">233</span>
                    <span class="text-red-600 text-sm font-medium ml-3">18 today</span>
                </div>
            </div>

<div class="relative">
                <canvas id="chart-unfulfilled" class="sparkline-canvas"></canvas>
                <div class="absolute bottom-4 right-6 text-xs text-gray-400">
                    <span class="inline-block w-2 h-2 bg-red-500 rounded-full mr-1"></span>
                    12 total • 20 Apr, 2025
                </div>
            </div>
        </div>

</div>

// Total Orders - Línea verde ascendente
        new Chart(document.getElementById('chart-orders'), {
            type: 'line',
            data: {
                labels: Array(30).fill(''),
                datasets: [{
                    data: [320, 350, 380, 360, 420, 480, 520, 580, 650, 720, 780, 850, 920, 980, 1020, 1054],
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 197, 121, 0.1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true
                }]
            },
            options: sparklineOptions
        });

// Unfulfilled - Línea roja descendente leve
        new Chart(document.getElementById('chart-unfulfilled'), {
            type: 'line',
            data: {
                labels: Array(30).fill(''),
                datasets: [{
                    data: [380, 360, 350, 340, 320, 310, 300, 280, 270, 260, 255, 250, 245, 240, 238, 233],
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true
                }]
            },
            options: sparklineOptions
        });
    </script>
</body>

</html>

Related Examples

Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

1 month ago

359
Card kpi Chart
Targetas kpi con graficas

Author:
Raul antonio de la cruz hernandez

1 month ago

241
Total balance overview

Author:
Raul antonio de la cruz hernandez

1 month ago

156
Targeta
Targeta

Author:
Raul antonio de la cruz hernandez

1 month ago

228
Simple responsive cards

Author:
Shakti

2 years ago

9.9k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Author:
Nick Girga

7 months ago

623
Product review card

Author:
Rama krishnan Subramanian

1 year ago

2.2k
Article card

Author:
Sienna

3 years ago

12.6k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

3 years ago

13.2k
dashboard layout

Author:
AKASH GANDHAR

9 months ago

1.6k
Cards section - Sport

Author:
ABDO-SY

9 months ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components