Home
Alif Bima Pradana
Infinity Premium Dashboard Tailwind

Infinity Premium Dashboard Tailwind

Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

This tailwind example is contributed by Alif Bima Pradana, on 07-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Admin Dashboard, User dashboard

Toggle switch Other Dashboard

Author Alif Bima Pradana

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="scroll-smooth"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INFINITY | Premium Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

<div id="sidebar-overlay" onclick="toggleSidebar()" class="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm hidden lg:hidden transition-opacity opacity-0"></div>

<div class="flex h-screen overflow-hidden">

<aside id="sidebar" class="sidebar-transition fixed inset-y-0 left-0 z-50 w-64 -translate-x-full border-r border-slate-200 bg-white lg:static lg:translate-x-0 dark:border-dark-border dark:bg-dark-card flex flex-col justify-between">
            <div class="">
                
                <div class="flex h-16 items-center px-6 border-b border-slate-100 dark:border-dark-border">
                    <div class="flex items-center gap-2">
                        <div class="h-6 w-6 rounded bg-brand-900 flex items-center justify-center text-white">
                            <iconify-icon icon="solar:infinity-linear" width="16"></iconify-icon>
                        </div>
                        <span class="dark:text-white text-lg font-extrabold text-slate-900 tracking-tight font-poppins">INFINITY</span>
                    </div>
                </div>

<nav class="space-y-1 px-3 py-6">
                    <a href="#" class="group flex items-center gap-3 dark:bg-brand-900/20 dark:text-brand-100 text-sm font-medium text-brand-900 bg-brand-50 rounded-lg pt-2.5 pr-3 pb-2.5 pl-3">
                        <iconify-icon icon="solar:widget-5-linear" width="20" stroke-width="1.5"></iconify-icon>
                        Dashboard
                    </a>
                    <a href="#" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white transition-all">
                        <iconify-icon icon="solar:chart-2-linear" width="20" stroke-width="1.5" class=""></iconify-icon>
                        Analytics
                    </a>
                    <a href="#" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white transition-all">
                        <iconify-icon icon="solar:users-group-rounded-linear" width="20" stroke-width="1.5"></iconify-icon>
                        Customers
                    </a>
                    <a href="#" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white transition-all">
                        <iconify-icon icon="solar:wallet-money-linear" width="20" stroke-width="1.5"></iconify-icon>
                        Finance
                    </a>
                    <a href="#" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white transition-all">
                        <iconify-icon icon="solar:folder-with-files-linear" width="20" stroke-width="1.5"></iconify-icon>
                        Documents
                    </a>
                </nav>
            </div>

<div class="border-t border-slate-100 p-3 dark:border-dark-border">
                <a href="#" class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-white transition-all">
                    <iconify-icon icon="solar:settings-linear" width="20" stroke-width="1.5"></iconify-icon>
                    Settings
                </a>
                <div class="mt-4 flex items-center gap-3 px-3">
                    <div class="relative h-8 w-8 overflow-hidden rounded-full bg-slate-200">
                        <img src="https://ui-avatars.com/api/?name=Alex+Morgan&background=010694&color=fff" alt="User" class="h-full w-full object-cover">
                    </div>
                    <div class="flex flex-col">
                        <span class="text-xs font-semibold text-slate-900 dark:text-white">Alex Morgan</span>
                        <span class="text-xxs text-slate-500">Admin Workspace</span>
                    </div>
                </div>
            </div>
        </aside>

<main class="flex-1 flex flex-col h-screen overflow-hidden relative">
            
            
            <header class="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-slate-200/60 bg-white/80 px-4 glass-effect lg:px-8 dark:border-dark-border dark:bg-dark-bg/80">
                <div class="flex items-center gap-4">
                    <button onclick="toggleSidebar()" class="flex items-center justify-center rounded-xl p-2 text-slate-500 hover:bg-slate-100 lg:hidden dark:text-slate-400 dark:hover:bg-white/5 border">
                        <iconify-icon icon="solar:hamburger-menu-linear" width="24" stroke-width="1.5"></iconify-icon>
                    </button>
                    
                    <div class="hidden md:flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-1.5 ring-1 ring-slate-200 focus-within:ring-brand-500 dark:bg-dark-card dark:ring-dark-border">
                        <iconify-icon icon="solar:magnifer-linear" class="text-slate-400"></iconify-icon>
                        <input type="text" placeholder="Search analytics..." class="w-64 bg-transparent text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-white">
                        <div class="flex items-center gap-1 rounded border border-slate-200 px-1.5 py-0.5 dark:border-dark-border">
                            <span class="text-xs text-slate-400">⌘K</span>
                        </div>
                    </div>
                </div>

<div class="flex-1 overflow-y-auto lg:p-8 dark:bg-dark-bg bg-slate-50/50 pt-4 pr-4 pb-4 pl-4">
                
                
                <div class="mb-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
                    <div class="">
                        <h1 class="text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">Overview</h1>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Welcome back, here's what's happening today.</p>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 items-center rounded-lg border border-slate-200 bg-white px-3 shadow-sm dark:border-dark-border dark:bg-dark-card">
                            <span class="text-sm font-medium text-slate-600 dark:text-slate-300">Oct 24, 2023</span>
                        </div>
                        <button class="flex h-9 items-center gap-2 rounded-lg bg-brand-900 px-4 text-sm font-medium text-white shadow-lg shadow-brand-900/20 hover:bg-brand-800 transition-colors">
                            <iconify-icon icon="solar:download-linear"></iconify-icon>
                            Export
                        </button>
                    </div>
                </div>

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    
                    <div class="group relative overflow-hidden rounded-xl border border-slate-200 bg-white p-5 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] transition-all hover:-translate-y-1 hover:shadow-lg dark:border-dark-border dark:bg-dark-card dark:shadow-none">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400">TOTAL REVENUE</p>
                                <h3 class="mt-2 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">$124,500</h3>
                            </div>
                            <div class="dark:bg-brand-900/20 dark:text-brand-300 text-brand-900 bg-brand-50 rounded-lg pt-2 pr-2 pb-1 pl-2">
                                <iconify-icon icon="solar:dollar-linear" width="20" class="" height="20" style="color: rgb(1, 6, 148);"></iconify-icon>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center gap-1 text-xs">
                            <span class="flex items-center font-medium text-emerald-600 dark:text-emerald-400">
                                <iconify-icon icon="solar:arrow-right-up-linear" class="mr-0.5"></iconify-icon>
                                +12.5%
                            </span>
                            <span class="text-slate-400">from last month</span>
                        </div>
                    </div>

<div class="group relative overflow-hidden rounded-xl border border-slate-200 bg-white p-5 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] transition-all hover:-translate-y-1 hover:shadow-lg dark:border-dark-border dark:bg-dark-card dark:shadow-none">
                        <div class="flex items-start justify-between">
                            <div class="">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400">ACTIVE USERS</p>
                                <h3 class="mt-2 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">8,234</h3>
                            </div>
                            <div class="dark:bg-purple-900/20 dark:text-purple-300 text-purple-600 bg-purple-50 rounded-lg pt-2 pr-2 pb-0 pl-2">
                                <iconify-icon icon="solar:users-group-two-rounded-linear" width="20" class=""></iconify-icon>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center gap-1 text-xs">
                            <span class="flex items-center font-medium text-emerald-600 dark:text-emerald-400">
                                <iconify-icon icon="solar:arrow-right-up-linear" class="mr-0.5"></iconify-icon>
                                +4.2%
                            </span>
                            <span class="text-slate-400">from last month</span>
                        </div>
                    </div>

<div class="group overflow-hidden transition-all hover:-translate-y-1 hover:shadow-lg dark:border-dark-border dark:bg-dark-card dark:shadow-none bg-white border-slate-200 border rounded-xl pt-5 pr-5 pb-5 pl-5 relative shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)]">
                        <div class="flex items-start justify-between">
                            <div class="">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400">BOUNCE RATE</p>
                                <h3 class="mt-2 text-2xl font-semibold tracking-tight text-slate-900 dark:text-white">42.3%</h3>
                            </div>
                            <div class="dark:bg-orange-900/20 dark:text-orange-300 text-orange-600 bg-orange-50 rounded-lg pt-2 pr-2 pb-0 pl-2">
                                <iconify-icon icon="solar:graph-down-linear" width="20" class=""></iconify-icon>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center gap-1 text-xs">
                            <span class="flex items-center font-medium text-red-500">
                                <iconify-icon icon="solar:arrow-right-down-linear" class="mr-0.5"></iconify-icon>
                                -2.1%
                            </span>
                            <span class="text-slate-400">from last month</span>
                        </div>
                    </div>

<div class="group relative overflow-hidden rounded-xl border border-slate-200 bg-white p-5 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] transition-all hover:-translate-y-1 hover:shadow-lg dark:border-dark-border dark:bg-dark-card dark:shadow-none">
                        <div class="flex items-start justify-between">
                            <div class="">
                                <p class="text-xs font-medium text-slate-500 dark:text-slate-400">AVG. SESSION</p>
                                <h3 class="dark:text-white text-2xl font-semibold text-slate-900 tracking-tight mt-2">4m 32s</h3>
                            </div>
                            <div class="dark:bg-teal-900/20 dark:text-teal-300 text-teal-600 bg-teal-50 rounded-lg pt-2 pr-2 pb-0 pl-2">
                                <iconify-icon icon="solar:clock-circle-linear" width="20"></iconify-icon>
                            </div>
                        </div>
                        <div class="mt-4 flex items-center gap-1 text-xs">
                            <span class="flex items-center font-medium text-emerald-600 dark:text-emerald-400">
                                <iconify-icon icon="solar:arrow-right-up-linear" class="mr-0.5"></iconify-icon>
                                +8.1%
                            </span>
                            <span class="text-slate-400">from last month</span>
                        </div>
                    </div>
                </div>

<div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
                    
                    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-dark-border dark:bg-dark-card lg:col-span-2">
                        <div class="mb-6 flex items-center justify-between">
                            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Revenue Growth</h3>
                            <select class="rounded-lg border border-slate-200 bg-transparent px-2 py-1 text-xs text-slate-600 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-dark-border dark:text-slate-400">
                                <option>This Year</option>
                                <option>Last Year</option>
                            </select>
                        </div>
                        <div class="relative h-64 w-full">
                            <canvas id="revenueChart" style="display: block; box-sizing: border-box; height: 256px; width: 745.6px;" width="932" height="320" class=""></canvas>
                        </div>
                    </div>

<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-dark-border dark:bg-dark-card">
                        <div class="mb-6 flex items-center justify-between">
                            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Traffic Source</h3>
                            <button class="text-slate-400 hover:text-brand-900 dark:hover:text-white">
                                <iconify-icon icon="solar:menu-dots-linear"></iconify-icon>
                            </button>
                        </div>
                        <div class="relative h-48 w-full flex items-center justify-center">
                            <canvas id="trafficChart" style="display: block; box-sizing: border-box; height: 192px; width: 336px;" width="420" height="240" class=""></canvas>
                        </div>
                        <div class="mt-6 space-y-3">
                            <div class="flex items-center justify-between text-sm">
                                <div class="flex items-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-brand-900"></span>
                                    <span class="text-slate-600 dark:text-slate-400">Direct</span>
                                </div>
                                <span class="font-medium text-slate-900 dark:text-white">45%</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <div class="flex items-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-brand-400"></span>
                                    <span class="text-slate-600 dark:text-slate-400">Social</span>
                                </div>
                                <span class="font-medium text-slate-900 dark:text-white">32%</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <div class="flex items-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-600"></span>
                                    <span class="text-slate-600 dark:text-slate-400">Referral</span>
                                </div>
                                <span class="font-medium text-slate-900 dark:text-white">23%</span>
                            </div>
                        </div>
                    </div>
                </div>

<div class="mt-6 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-dark-border dark:bg-dark-card">
                    <div class="flex flex-col gap-4 border-b border-slate-200 px-6 py-5 sm:flex-row sm:items-center sm:justify-between dark:border-dark-border">
                        <h3 class="text-base font-semibold text-slate-900 dark:text-white">Recent Transactions</h3>
                        <div class="flex items-center gap-2">
                            <div class="relative">
                                <iconify-icon icon="solar:magnifer-linear" class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></iconify-icon>
                                <input type="text" placeholder="Filter..." class="h-9 w-40 rounded-lg border border-slate-200 bg-transparent pl-9 pr-3 text-sm text-slate-600 focus:border-brand-500 focus:outline-none dark:border-dark-border dark:text-slate-300">
                            </div>
                            <button class="flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 text-sm font-medium text-slate-600 hover:bg-slate-50 dark:border-dark-border dark:text-slate-300 dark:hover:bg-white/5">
                                <iconify-icon icon="solar:filter-linear"></iconify-icon>
                                Filter
                            </button>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full text-left">
                            <thead class="">
                                <tr class="border-b border-slate-200 bg-slate-50/50 text-xs font-medium uppercase tracking-wide text-slate-500 dark:border-dark-border dark:bg-white/5 dark:text-slate-400">
                                    <th class="p-4 w-4">
                                        <input type="checkbox" class="custom-checkbox h-4 w-4 rounded border-slate-300 text-brand-900 focus:ring-0 dark:border-slate-600 dark:bg-dark-bg">
                                    </th>
                                    <th class="p-4">Customer</th>
                                    <th class="p-4">Status</th>
                                    <th class="p-4">Date</th>
                                    <th class="p-4">Amount</th>
                                    <th class="p-4 text-right">Action</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 dark:divide-dark-border text-sm">
                                <tr class="group hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                    <td class="p-4">
                                        <input type="checkbox" class="custom-checkbox h-4 w-4 rounded border-slate-300 text-brand-900 focus:ring-0 dark:border-slate-600 dark:bg-dark-bg">
                                    </td>
                                    <td class="p-4">
                                        <div class="flex items-center gap-3">
                                            <div class="h-8 w-8 rounded-full bg-gradient-to-tr from-brand-100 to-purple-100 dark:from-brand-900/40 dark:to-purple-900/40 flex items-center justify-center text-xs font-bold text-brand-900 dark:text-brand-200">
                                                JD
                                            </div>
                                            <div class="flex flex-col">
                                                <span class="font-medium text-slate-900 dark:text-white">John Doe</span>
                                                <span class="text-xs text-slate-500">john@example.com</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400">
                                            Paid
                                        </span>
                                    </td>
                                    <td class="p-4 text-slate-500 dark:text-slate-400">Oct 24, 2023</td>
                                    <td class="p-4 font-medium text-slate-900 dark:text-white">$350.00</td>
                                    <td class="p-4 text-right">
                                        <button class="text-slate-400 hover:text-brand-900 dark:hover:text-white transition-colors">
                                            <iconify-icon icon="solar:menu-dots-linear" width="20"></iconify-icon>
                                        </button>
                                    </td>
                                </tr>

<tr class="group hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                                    <td class="p-4">
                                        <input type="checkbox" class="custom-checkbox h-4 w-4 rounded border-slate-300 text-brand-900 focus:ring-0 dark:border-slate-600 dark:bg-dark-bg">
                                    </td>
                                    <td class="p-4">
                                        <div class="flex items-center gap-3">
                                            <div class="h-8 w-8 rounded-full bg-gradient-to-tr from-blue-100 to-cyan-100 dark:from-blue-900/40 dark:to-cyan-900/40 flex items-center justify-center text-xs font-bold text-blue-800 dark:text-blue-200">
                                                MK
                                            </div>
                                            <div class="flex flex-col">
                                                <span class="font-medium text-slate-900 dark:text-white">Mike K.</span>
                                                <span class="text-xs text-slate-500">mike@tech.co</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="p-4">
                                        <span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400">
                                            Paid
                                        </span>
                                    </td>
                                    <td class="p-4 text-slate-500 dark:text-slate-400">Oct 21, 2023</td>
                                    <td class="p-4 font-medium text-slate-900 dark:text-white">$850.00</td>
                                    <td class="p-4 text-right">
                                        <button class="text-slate-400 hover:text-brand-900 dark:hover:text-white transition-colors">
                                            <iconify-icon icon="solar:menu-dots-linear" width="20"></iconify-icon>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    
                    <div class="flex items-center justify-between border-t border-slate-200 px-6 py-4 dark:border-dark-border">
                        <span class="text-xs text-slate-500 dark:text-slate-400">Showing 1-3 of 24 results</span>
                        <div class="flex items-center gap-2">
                            <button class="flex h-8 w-8 items-center justify-center rounded border border-slate-200 text-slate-500 hover:bg-slate-50 disabled:opacity-50 dark:border-dark-border dark:text-slate-400 dark:hover:bg-white/5">
                                <iconify-icon icon="solar:alt-arrow-left-linear"></iconify-icon>
                            </button>
                            <button class="flex h-8 w-8 items-center justify-center rounded border border-slate-200 bg-brand-900 text-white shadow-sm dark:border-brand-900">1</button>
                            <button class="flex h-8 w-8 items-center justify-center rounded border border-slate-200 text-slate-500 hover:bg-slate-50 dark:border-dark-border dark:text-slate-400 dark:hover:bg-white/5">2</button>
                            <button class="flex h-8 w-8 items-center justify-center rounded border border-slate-200 text-slate-500 hover:bg-slate-50 dark:border-dark-border dark:text-slate-400 dark:hover:bg-white/5">
                                <iconify-icon icon="solar:alt-arrow-right-linear"></iconify-icon>
                            </button>
                        </div>
                    </div>
                </div>

<div class="mt-8 text-center">
                    <p class="text-xs text-slate-400">© 2023 Infinity Inc. All rights reserved.</p>
                </div>

</div>
        </main>
    </div>

// Dark Mode Logic
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const html = document.documentElement;
        
        // Check local storage
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
            themeIcon.setAttribute('icon', 'solar:moon-linear');
        } else {
            html.classList.remove('dark');
            themeIcon.setAttribute('icon', 'solar:sun-2-linear');
        }

themeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            if (html.classList.contains('dark')) {
                localStorage.theme = 'dark';
                themeIcon.setAttribute('icon', 'solar:moon-linear');
                updateCharts(true);
            } else {
                localStorage.theme = 'light';
                themeIcon.setAttribute('icon', 'solar:sun-2-linear');
                updateCharts(false);
            }
        });

// Charts Configuration
        Chart.defaults.font.family = "'Inter', sans-serif";
        Chart.defaults.color = '#94a3b8';
        
        let revenueChartInstance;
        let trafficChartInstance;

function initCharts() {
            const isDark = html.classList.contains('dark');
            const gridColor = isDark ? '#1E2536' : '#f1f5f9';
            const textColor = isDark ? '#94a3b8' : '#64748b';

// Revenue Chart (Line)
            const ctxRev = document.getElementById('revenueChart').getContext('2d');
            
            // Gradient
            let gradient = ctxRev.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, 'rgba(1, 6, 148, 0.2)');
            gradient.addColorStop(1, 'rgba(1, 6, 148, 0)');

revenueChartInstance = new Chart(ctxRev, {
                type: 'line',
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
                    datasets: [{
                        label: 'Revenue',
                        data: [12, 19, 15, 25, 22, 30, 28, 35],
                        borderColor: '#010694',
                        backgroundColor: gradient,
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#ffffff',
                        pointBorderColor: '#010694',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: { color: gridColor, borderDash: [5, 5] },
                            ticks: { color: textColor, font: { size: 11 } },
                            border: { display: false }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { color: textColor, font: { size: 11 } },
                            border: { display: false }
                        }
                    }
                }
            });

// Traffic Chart (Doughnut)
            const ctxTraffic = document.getElementById('trafficChart').getContext('2d');
            trafficChartInstance = new Chart(ctxTraffic, {
                type: 'doughnut',
                data: {
                    labels: ['Direct', 'Social', 'Referral'],
                    datasets: [{
                        data: [45, 32, 23],
                        backgroundColor: ['#010694', '#6d70fc', '#e2e8f0'],
                        borderWidth: 0,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '75%',
                    plugins: {
                        legend: { display: false }
                    }
                }
            });
        }

function updateCharts(isDark) {
            const gridColor = isDark ? '#1E2536' : '#f1f5f9';
            const textColor = isDark ? '#94a3b8' : '#64748b';
            
            // Update Line Chart
            revenueChartInstance.options.scales.y.grid.color = gridColor;
            revenueChartInstance.options.scales.y.ticks.color = textColor;
            revenueChartInstance.options.scales.x.ticks.color = textColor;
            revenueChartInstance.update();

// Update Doughnut Chart (Colors)
            trafficChartInstance.data.datasets[0].backgroundColor = ['#010694', '#6d70fc', isDark ? '#334155' : '#e2e8f0'];
            trafficChartInstance.update();
        }

// Initialize
        document.addEventListener('DOMContentLoaded', initCharts);

</script>

</body></html>

Related Examples

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.9k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

11 months ago

1.6k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

9 months ago

714
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

8 months ago

980
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

842
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

8 months ago

889
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

1.8k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

514
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Author:
Alif Bima Pradana

6 hours ago

2
Taskify Premium Task Management FREE
Website Task management modern and responsif

Author:
Alif Bima Pradana

6 hours ago

6
magic card
by salvator

Author:
Baraka Salvator

8 months ago

930
Snake Game tailwind
snake game

Author:
QQ-VVN

8 months ago

660

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components