Home
Alif Bima Pradana
SalivaGuard Dashboard Modern

SalivaGuard Dashboard Modern

This is a mobile app interface design (Android style) for "SalivaGuard AI." I've designed it in a single file that includes HTML, CSS (via Tailwind), and JavaScript for the interaction logic.

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

Dashboard

Author Alif Bima Pradana

125

Fork Fullscreen

<!DOCTYPE html>
<html lang="id" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>SalivaHealth AI - Sensor Monitoring</title>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#6102f0',
                        primaryDark: '#4a00c2',
                        secondary: '#8b5cf6',
                        bgDark: '#0f172a',
                        surfaceDark: '#1e293b',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444'
                    },
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                    }
                }
            }
        }
    </script>

.glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .dark .glass {
            background: rgba(15, 23, 42, 0.8);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

.page-section {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .page-section.active {
            display: block;
            opacity: 1;
            animation: fadeIn 0.4s ease-out;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* Custom Chart Styles for Dark Mode */
        .dark .apexcharts-tooltip {
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #fff;
        }
        .dark .apexcharts-tooltip-title {
            background: #0f172a !important;
            border-bottom: 1px solid #334155 !important;
        }
        .dark .apexcharts-text {
            fill: #94a3b8 !important; 
        }
        .dark .apexcharts-gridline {
            stroke: #334155 !important;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-bgDark dark:text-white transition-colors duration-300 font-sans h-screen overflow-hidden flex flex-col">

<header class="fixed top-0 w-full z-50 px-6 py-4 glass flex justify-between items-center transition-colors duration-300">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/40">
                <i data-lucide="cpu" class="w-5 h-5"></i>
            </div>
            <span class="font-bold text-xl tracking-tight">Saliva<span class="text-primary">Guard</span></span>
        </div>
        <div class="flex items-center gap-3">
            
            <div id="connection-status" class="flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-500 text-xs font-medium transition-colors">
                <span class="w-2 h-2 rounded-full bg-slate-400" id="status-dot"></span>
                <span id="status-text">Offline</span>
            </div>
            <button onclick="toggleTheme()" class="p-2 rounded-full bg-slate-200 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700 transition-all">
                <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
                <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
            </button>
        </div>
    </header>

<main class="flex-1 pt-20 pb-24 overflow-y-auto no-scrollbar px-5 relative">
        
        
        <section id="home-page" class="page-section active">
            
            
            <div class="flex justify-between items-end mb-6">
                <div>
                    <h2 class="text-2xl font-bold">Monitor Realtime</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Data sensor Arduino langsung.</p>
                </div>
                <button onclick="toggleSensorConnection()" id="connect-btn" class="px-4 py-2 bg-primary text-white text-xs font-bold rounded-xl shadow-lg shadow-primary/30 active:scale-95 transition-all flex items-center gap-2">
                    <i data-lucide="wifi" class="w-4 h-4"></i>
                    Hubungkan
                </button>
            </div>

<div class="space-y-6">
                
                
                <div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
                                <i data-lucide="droplet" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">pH Level</h3>
                                <p class="text-[10px] text-slate-500">Keasaman Sampel</p>
                            </div>
                        </div>
                        <span id="ph-value" class="text-xl font-bold text-blue-600">7.0</span>
                    </div>
                    
                    <div id="chart-ph" class="h-40 w-full"></div>
                </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400">
                                <i data-lucide="eye" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">Kekeruhan</h3>
                                <p class="text-[10px] text-slate-500">Sensor Warna</p>
                            </div>
                        </div>
                        <span id="color-value" class="text-xl font-bold text-purple-600">0 NTU</span>
                    </div>
                    
                    <div id="chart-color" class="h-40 w-full"></div>
                </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-5 shadow-sm border border-slate-100 dark:border-slate-800">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center gap-2">
                            <div class="p-2 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">
                                <i data-lucide="scale" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="text-sm font-bold">Viskositas</h3>
                                <p class="text-[10px] text-slate-500">Load Cell (Gram)</p>
                            </div>
                        </div>
                        <span id="load-value" class="text-xl font-bold text-orange-600">0 g</span>
                    </div>
                    
                    <div id="chart-load" class="h-40 w-full"></div>
                </div>

</div>

<div class="mt-6">
                <button onclick="startFullAnalysis()" id="analyze-btn" disabled class="w-full py-4 rounded-2xl bg-slate-200 dark:bg-slate-800 text-slate-400 font-bold flex items-center justify-center gap-2 transition-all">
                    <i data-lucide="brain-circuit" class="w-5 h-5"></i>
                    Menunggu Data Sensor...
                </button>
            </div>
        </section>

<section id="analysis-page" class="page-section hidden h-full flex flex-col items-center justify-center text-center">
            <div class="relative w-40 h-40 mb-8">
                
                <div class="absolute inset-0 rounded-full border-4 border-slate-200 dark:border-slate-700 opacity-30"></div>
                <div class="absolute inset-0 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
                <div class="absolute inset-4 rounded-full bg-primary/10 flex items-center justify-center animate-pulse">
                    <i data-lucide="cpu" class="w-12 h-12 text-primary"></i>
                </div>
            </div>
            <h2 class="text-2xl font-bold mb-2">Memproses Data...</h2>
            <p class="text-slate-500 dark:text-slate-400 text-sm max-w-xs mx-auto">Gemini AI sedang mengkorelasikan data pH, Kekeruhan, dan Berat Jenis dari sensor.</p>
            
            <div class="mt-8 flex gap-4 text-xs font-mono text-slate-400">
                <span class="animate-pulse">pH: OK</span>
                <span class="animate-pulse delay-75">RGB: OK</span>
                <span class="animate-pulse delay-150">LOAD: OK</span>
            </div>
        </section>

<section id="result-page" class="page-section hidden">
            <div class="text-center mb-6">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 mb-4 ring-4 ring-green-50 dark:ring-green-900/10">
                    <i data-lucide="check-circle-2" class="w-8 h-8"></i>
                </div>
                <h2 class="text-2xl font-bold">Diagnosis Selesai</h2>
                <p class="text-slate-500 dark:text-slate-400 text-xs">ID Tes: #ARD-SENSOR-001</p>
            </div>

<div class="bg-white dark:bg-surfaceDark rounded-3xl p-6 shadow-lg border-t-4 border-primary mb-6">
                <h3 class="font-bold text-lg mb-3">Ringkasan Sensor</h3>
                <div class="grid grid-cols-3 gap-2 mb-6 text-center">
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Rata-rata pH</div>
                        <div class="font-bold text-blue-600">7.2</div>
                    </div>
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Kekeruhan</div>
                        <div class="font-bold text-purple-600">Normal</div>
                    </div>
                    <div class="p-2 bg-slate-50 dark:bg-slate-800 rounded-xl">
                        <div class="text-[10px] text-slate-500 uppercase">Viskositas</div>
                        <div class="font-bold text-orange-600">Cair</div>
                    </div>
                </div>
                
                <h3 class="font-bold mb-2">Analisis AI:</h3>
                <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
                    Berdasarkan input sensor, parameter biokimia sampel liur berada dalam rentang fisiologis normal. Tidak terdeteksi adanya asidosis atau infeksi bakteri berat berdasarkan profil kekeruhan.
                </p>
            </div>

<button onclick="openChatWithContext()" class="w-full py-4 rounded-2xl bg-gradient-to-r from-primary to-secondary text-white font-bold shadow-lg shadow-primary/30 flex items-center justify-center gap-2 hover:scale-[1.02] transition-transform">
                <i data-lucide="message-square-plus" class="w-5 h-5"></i>
                Tanya Gemini AI
            </button>
        </section>

<section id="chat-page" class="page-section hidden h-full flex flex-col">
            <div class="flex-1 bg-slate-50 dark:bg-bgDark overflow-y-auto no-scrollbar pb-4" id="chat-container">
                
                <div class="flex gap-3 mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-white text-xs">
                        <i data-lucide="bot" class="w-4 h-4"></i>
                    </div>
                    <div class="bg-white dark:bg-surfaceDark p-3 rounded-2xl rounded-tl-none shadow-sm text-sm border border-slate-100 dark:border-slate-800 max-w-[80%]">
                        <p class="text-slate-700 dark:text-slate-200">Halo! Saya telah menerima data dari Arduino Anda. Ada yang ingin ditanyakan tentang grafik pH atau hasil sensor lainnya?</p>
                    </div>
                </div>
            </div>

</main>

<nav class="fixed bottom-0 w-full glass z-50 pb-safe pt-2 px-6 rounded-t-3xl shadow-[0_-5px_20px_rgba(0,0,0,0.05)] dark:shadow-[0_-5px_20px_rgba(0,0,0,0.2)]">
        <div class="flex justify-between items-center h-16">
            <button onclick="navTo('home-page')" class="nav-btn active flex flex-col items-center gap-1 text-primary transition-all">
                <i data-lucide="activity" class="w-6 h-6"></i>
                <span class="text-[10px] font-medium">Monitor</span>
            </button>
            
            <div class="relative -top-6">
                <button onclick="startFullAnalysis()" class="w-14 h-14 rounded-full bg-primary text-white shadow-lg shadow-primary/40 flex items-center justify-center transform transition hover:scale-110">
                    <i data-lucide="brain-circuit" class="w-7 h-7"></i>
                </button>
            </div>

<script>
        lucide.createIcons();

// --- GLOBAL VARIABLES ---
        let isConnected = false;
        let sensorInterval = null;
        let charts = {};
        
        // --- APEXCHARTS CONFIGURATION ---
        const commonOptions = {
            chart: {
                type: 'line',
                height: 160,
                toolbar: { show: false },
                animations: {
                    enabled: true,
                    easing: 'linear',
                    dynamicAnimation: { speed: 1000 }
                },
                background: 'transparent'
            },
            stroke: { curve: 'smooth', width: 3 },
            dataLabels: { enabled: false },
            xaxis: {
                labels: { show: false },
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: { show: false },
            grid: {
                show: true,
                borderColor: '#f1f5f9',
                strokeDashArray: 4,
                padding: { top: 0, right: 0, bottom: 0, left: 10 } 
            },
            theme: { mode: 'light' } // Will update dynamically
        };

// Initialize Charts on Load
        document.addEventListener('DOMContentLoaded', () => {
            initCharts();
        });

function initCharts() {
            // 1. pH Chart
            charts.ph = new ApexCharts(document.querySelector("#chart-ph"), {
                ...commonOptions,
                series: [{ name: 'pH', data: [7, 7, 7, 7, 7, 7, 7, 7, 7, 7] }],
                colors: ['#2563eb'], // Blue
                yaxis: { min: 0, max: 14, show: false }
            });
            charts.ph.render();

// 2. Color/Turbidity Chart (Area)
            charts.color = new ApexCharts(document.querySelector("#chart-color"), {
                ...commonOptions,
                chart: { ...commonOptions.chart, type: 'area' },
                series: [{ name: 'Turbidity', data: [20, 22, 21, 23, 20, 21, 22, 20, 21, 20] }],
                colors: ['#9333ea'], // Purple
                yaxis: { min: 0, max: 100, show: false }
            });
            charts.color.render();

// 3. Load Cell Chart (Bar)
            charts.load = new ApexCharts(document.querySelector("#chart-load"), {
                ...commonOptions,
                chart: { ...commonOptions.chart, type: 'bar' },
                series: [{ name: 'Weight', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }],
                colors: ['#ea580c'], // Orange
                yaxis: { min: 0, max: 50, show: false }
            });
            charts.load.render();
        }

// --- ARDUINO SIMULATION LOGIC ---
        function toggleSensorConnection() {
            const btn = document.getElementById('connect-btn');
            const statusDot = document.getElementById('status-dot');
            const statusText = document.getElementById('status-text');
            const analyzeBtn = document.getElementById('analyze-btn');

if (!isConnected) {
                // CONNECTING
                btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Menghubungkan...`;
                
                setTimeout(() => {
                    isConnected = true;
                    // Update UI
                    btn.innerHTML = `<i data-lucide="wifi-off" class="w-4 h-4"></i> Putuskan`;
                    btn.classList.replace('bg-primary', 'bg-red-500');
                    btn.classList.replace('shadow-primary/30', 'shadow-red-500/30');
                    
                    statusDot.classList.replace('bg-slate-400', 'bg-green-500');
                    statusText.innerText = "Online";
                    statusText.classList.add('text-green-600', 'font-bold');
                    
                    // Enable Analysis Button
                    analyzeBtn.disabled = false;
                    analyzeBtn.classList.remove('bg-slate-200', 'text-slate-400', 'dark:bg-slate-800');
                    analyzeBtn.classList.add('bg-primary', 'text-white', 'shadow-lg', 'shadow-primary/30');
                    analyzeBtn.innerHTML = `<i data-lucide="brain-circuit" class="w-5 h-5"></i> Analisis Sekarang`;

lucide.createIcons();
                    
                    // Start Data Stream
                    startDataStream();
                }, 1500);

} else {
                // DISCONNECTING
                isConnected = false;
                clearInterval(sensorInterval);
                
                // Update UI
                btn.innerHTML = `<i data-lucide="wifi" class="w-4 h-4"></i> Hubungkan`;
                btn.classList.replace('bg-red-500', 'bg-primary');
                btn.classList.replace('shadow-red-500/30', 'shadow-primary/30');
                
                statusDot.classList.replace('bg-green-500', 'bg-slate-400');
                statusText.innerText = "Offline";
                statusText.classList.remove('text-green-600', 'font-bold');

// Disable Analysis Button
                analyzeBtn.disabled = true;
                analyzeBtn.classList.add('bg-slate-200', 'text-slate-400', 'dark:bg-slate-800');
                analyzeBtn.classList.remove('bg-primary', 'text-white', 'shadow-lg', 'shadow-primary/30');
                analyzeBtn.innerHTML = `<i data-lucide="wifi-off" class="w-5 h-5"></i> Sensor Offline`;

lucide.createIcons();
            }
        }

function startDataStream() {
            // Initial data arrays
            let dataPH = [7, 7, 7, 7, 7, 7, 7, 7, 7, 7];
            let dataColor = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];
            let dataLoad = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5];

sensorInterval = setInterval(() => {
                // Generate random sensor data (Simulation)
                const newPH = (Math.random() * (7.8 - 6.5) + 6.5).toFixed(1);
                const newColor = Math.floor(Math.random() * (40 - 20) + 20);
                const newLoad = Math.floor(Math.random() * (15 - 10) + 10);

// Update DOM Text
                document.getElementById('ph-value').innerText = newPH;
                document.getElementById('color-value').innerText = newColor + ' NTU';
                document.getElementById('load-value').innerText = newLoad + ' g';

// Shift arrays
                dataPH.push(newPH); dataPH.shift();
                dataColor.push(newColor); dataColor.shift();
                dataLoad.push(newLoad); dataLoad.shift();

// Update Charts
                charts.ph.updateSeries([{ data: dataPH }]);
                charts.color.updateSeries([{ data: dataColor }]);
                charts.load.updateSeries([{ data: dataLoad }]);

}, 1000); // Update every 1 second
        }

// --- NAVIGATION & UTILS ---
        function toggleTheme() {
            const html = document.documentElement;
            const isDark = html.classList.toggle('dark');
            html.classList.toggle('light');
            
            // Update Chart Theme
            const themeMode = isDark ? 'dark' : 'light';
            const gridColor = isDark ? '#334155' : '#f1f5f9';
            
            [charts.ph, charts.color, charts.load].forEach(chart => {
                chart.updateOptions({
                    theme: { mode: themeMode },
                    grid: { borderColor: gridColor }
                });
            });
        }

function navTo(pageId) {
            document.querySelectorAll('.page-section').forEach(el => {
                el.classList.remove('active');
                el.classList.add('hidden');
            });
            const target = document.getElementById(pageId);
            target.classList.remove('hidden');
            setTimeout(() => target.classList.add('active'), 10);

// Update Nav Icons
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('text-primary');
                btn.classList.add('text-slate-400');
            });
        }

// Chat Logic
        const chatContainer = document.getElementById('chat-container');
        const chatInput = document.getElementById('chat-input');

function sendMessage() {
            const text = chatInput.value.trim();
            if (!text) return;
            addUserMessage(text);
            chatInput.value = '';
            setTimeout(() => {
                let response = "Berdasarkan grafik realtime, fluktuasi pH Anda stabil di angka normal.";
                addBotMessage(response);
            }, 1000);
        }

function addUserMessage(text) {
            const div = document.createElement('div');
            div.className = "flex gap-3 mb-4 flex-row-reverse animate-in slide-in-from-right-5 fade-in duration-300";
            div.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex-shrink-0 flex items-center justify-center text-slate-600 dark:text-slate-300"><i data-lucide="user" class="w-4 h-4"></i></div>
                <div class="bg-primary text-white p-3 rounded-2xl rounded-tr-none shadow-md text-sm max-w-[80%]"><p>${text}</p></div>`;
            chatContainer.appendChild(div);
            scrollToBottom();
            lucide.createIcons();
        }

function addBotMessage(text) {
            const div = document.createElement('div');
            div.className = "flex gap-3 mb-4 animate-in slide-in-from-left-5 fade-in duration-300";
            div.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-primary flex-shrink-0 flex items-center justify-center text-white text-xs"><i data-lucide="bot" class="w-4 h-4"></i></div>
                <div class="bg-white dark:bg-surfaceDark p-3 rounded-2xl rounded-tl-none shadow-sm text-sm border border-slate-100 dark:border-slate-800 max-w-[80%]"><p class="text-slate-700 dark:text-slate-200">${text}</p></div>`;
            chatContainer.appendChild(div);
            scrollToBottom();
            lucide.createIcons();
        }

function scrollToBottom() {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

chatInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') sendMessage();
        });
        
        // Context Chat Action
        function openChatWithContext() {
            navTo('chat-page');
        }

</script>
</body>
</html>

Related Examples

User dashboard

Author:
Anonymous

2 years ago

13.5k
Targeta
Targeta

Author:
Raul antonio de la cruz hernandez

3 months ago

401
Tailwind Dashboard
full responsive

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.8k
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4.7k
Kost Management Dashboard UI modern
Here is the comprehensive design for the KostManagement dashboard, implemented with a focus on luxury, modern aesthetics, and the specific color palette provided.

Author:
Alif Bima Pradana

1 month ago

305
dashboard layout

Author:
AKASH GANDHAR

11 months ago

1.7k
Coursue - Online Learning Dashboard
Beginner's Guide to Becoming a Professional Front-End Developer

Author:
Alif Bima Pradana

4 days ago

15
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
sidebar

Author:
Abhishek Kumar

6 months ago

789
sidebar orange colour

Author:
Abhishek Kumar

6 months ago

818
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

1 year ago

1.6k
Taskify Premium Task Management FREE
Website Task management modern and responsif

Author:
Alif Bima Pradana

1 month ago

166

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components