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

183

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