Advanced Dashboard Widget Using Tailwind UI
A comprehensive dashboard widget component featuring real-time analytics, interactive charts, and modern design patterns. Built with Tailwind CSS for responsive layouts and smooth animations, perfect for admin panels and business intelligence applications.
dashboard widget analytics
Loading component...
505 lines
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Dashboard Widget</title>
<script src="https://cdn.tailwindcss.com"></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;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.gradient-border {
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen p-6">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 mb-2">Analytics Dashboard</h1>
<p class="text-gray-600">Real-time insights and performance metrics</p>
</div>
<!-- Main Dashboard Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Revenue Card -->
<div
class="lg:col-span-3 bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path
d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" />
</svg>
</div>
<h3 class="text-sm font-medium text-gray-700">Total Revenue</h3>
</div>
<div class="flex items-center text-green-600 text-xs font-medium">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
12.5%
</div>
</div>
<div class="space-y-2">
<div class="text-2xl font-bold text-gray-900">$124,592</div>
<div class="text-xs text-gray-500">vs last month: $110,473</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full animate-pulse-slow" style="width: 75%"></div>
</div>
</div>
</div>
<!-- Users Card -->
<div
class="lg:col-span-3 bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
</svg>
</div>
<h3 class="text-sm font-medium text-gray-700">Active Users</h3>
</div>
<div class="flex items-center text-blue-600 text-xs font-medium">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
8.2%
</div>
</div>
<div class="space-y-2">
<div class="text-2xl font-bold text-gray-900">24,891</div>
<div class="text-xs text-gray-500">vs last month: 23,012</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-500 h-2 rounded-full animate-pulse-slow" style="width: 82%"></div>
</div>
</div>
</div>
<!-- Conversion Rate -->
<div
class="lg:col-span-3 bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
<svg class="w-5 h-5 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<h3 class="text-sm font-medium text-gray-700">Conversion Rate</h3>
</div>
<div class="flex items-center text-purple-600 text-xs font-medium">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
15.3%
</div>
</div>
<div class="space-y-2">
<div class="text-2xl font-bold text-gray-900">4.7%</div>
<div class="text-xs text-gray-500">vs last month: 4.1%</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full animate-pulse-slow" style="width: 47%"></div>
</div>
</div>
</div>
<!-- Bounce Rate -->
<div
class="lg:col-span-3 bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-shadow">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center">
<svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
</div>
<h3 class="text-sm font-medium text-gray-700">Bounce Rate</h3>
</div>
<div class="flex items-center text-red-600 text-xs font-medium">
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
2.1%
</div>
</div>
<div class="space-y-2">
<div class="text-2xl font-bold text-gray-900">32.8%</div>
<div class="text-xs text-gray-500">vs last month: 33.5%</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full animate-pulse-slow" style="width: 33%"></div>
</div>
</div>
</div>
<!-- Sales Chart -->
<div class="lg:col-span-8 bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
<div class="flex items-center justify-between mb-6">
<div>
<h3 class="text-lg font-semibold text-gray-900">Sales Overview</h3>
<p class="text-sm text-gray-500">Monthly sales performance</p>
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-lg">7
Days</button>
<button class="px-3 py-1 text-xs font-medium text-gray-500 hover:text-gray-700">30 Days</button>
<button class="px-3 py-1 text-xs font-medium text-gray-500 hover:text-gray-700">3
Months</button>
</div>
</div>
<div class="h-80">
<canvas id="salesChart"></canvas>
</div>
</div>
<!-- Recent Activity -->
<div class="lg:col-span-4 bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">Recent Activity</h3>
<button class="text-sm text-blue-600 hover:text-blue-700 font-medium">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900">New order received</p>
<p class="text-xs text-gray-500">Order #12847 from Sarah Johnson</p>
<p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
</div>
<div class="text-sm font-medium text-green-600">+$89.99</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path
d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z" />
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900">New user registered</p>
<p class="text-xs text-gray-500">Michael Chen joined the platform</p>
<p class="text-xs text-gray-400 mt-1">5 minutes ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900">Server maintenance</p>
<p class="text-xs text-gray-500">Scheduled maintenance completed</p>
<p class="text-xs text-gray-400 mt-1">15 minutes ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
<path
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900">Dashboard updated</p>
<p class="text-xs text-gray-500">New analytics module deployed</p>
<p class="text-xs text-gray-400 mt-1">1 hour ago</p>
</div>
</div>
</div>
</div>
<!-- Top Products -->
<div class="lg:col-span-6 bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">Top Products</h3>
<button class="text-sm text-blue-600 hover:text-blue-700 font-medium">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<div
class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold">
1
</div>
<div class="flex-1">
<h4 class="text-sm font-medium text-gray-900">Premium Dashboard Pro</h4>
<p class="text-xs text-gray-500">Analytics & Reporting</p>
</div>
<div class="text-right">
<div class="text-sm font-medium text-gray-900">$299</div>
<div class="text-xs text-green-600">+$2,847 total</div>
</div>
</div>
<div class="flex items-center space-x-4">
<div
class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-xl flex items-center justify-center text-white font-bold">
2
</div>
<div class="flex-1">
<h4 class="text-sm font-medium text-gray-900">E-commerce Suite</h4>
<p class="text-xs text-gray-500">Full Stack Solution</p>
</div>
<div class="text-right">
<div class="text-sm font-medium text-gray-900">$199</div>
<div class="text-xs text-green-600">+$1,592 total</div>
</div>
</div>
<div class="flex items-center space-x-4">
<div
class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl flex items-center justify-center text-white font-bold">
3
</div>
<div class="flex-1">
<h4 class="text-sm font-medium text-gray-900">Mobile App Template</h4>
<p class="text-xs text-gray-500">React Native & Flutter</p>
</div>
<div class="text-right">
<div class="text-sm font-medium text-gray-900">$149</div>
<div class="text-xs text-green-600">+$1,043 total</div>
</div>
</div>
<div class="flex items-center space-x-4">
<div
class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center text-white font-bold">
4
</div>
<div class="flex-1">
<h4 class="text-sm font-medium text-gray-900">API Integration Kit</h4>
<p class="text-xs text-gray-500">Development Tools</p>
</div>
<div class="text-right">
<div class="text-sm font-medium text-gray-900">$99</div>
<div class="text-xs text-green-600">+$891 total</div>
</div>
</div>
</div>
</div>
<!-- Performance Widget -->
<div class="lg:col-span-6 bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">Performance</h3>
<div class="flex items-center space-x-2">
<div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
<span class="text-sm text-gray-600">Live</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="text-center p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl">
<div class="text-2xl font-bold text-blue-600 mb-1">98.7%</div>
<div class="text-sm text-gray-600">Uptime</div>
</div>
<div class="text-center p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl">
<div class="text-2xl font-bold text-green-600 mb-1">1.2s</div>
<div class="text-sm text-gray-600">Load Time</div>
</div>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600">CPU Usage</span>
<span class="text-sm font-medium text-gray-900">64%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="gradient-border h-2 rounded-full" style="width: 64%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600">Memory</span>
<span class="text-sm font-medium text-gray-900">78%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 78%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600">Storage</span>
<span class="text-sm font-medium text-gray-900">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Sales Chart
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Revenue',
data: [12000, 19000, 15000, 25000, 22000, 30000, 28000],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4,
pointBackgroundColor: '#3b82f6',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 6,
pointHoverRadius: 8
}, {
label: 'Orders',
data: [8000, 12000, 10000, 16000, 14000, 18000, 17000],
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4,
pointBackgroundColor: '#10b981',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 6,
pointHoverRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
border: {
display: false
},
grid: {
display: false
}
},
y: {
border: {
display: false
},
grid: {
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
callback: function (value) {
return '$' + value.toLocaleString();
}
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});
// Real-time updates simulation
setInterval(() => {
const indicators = document.querySelectorAll('.animate-pulse-slow');
indicators.forEach(indicator => {
const randomWidth = Math.floor(Math.random() * 30) + 60;
indicator.style.width = randomWidth + '%';
});
}, 5000);
// Live performance monitoring
function updatePerformanceMetrics() {
const cpuUsage = Math.floor(Math.random() * 40) + 50;
const memoryUsage = Math.floor(Math.random() * 30) + 60;
const storageUsage = Math.floor(Math.random() * 20) + 40;
// Update the values and progress bars
document.querySelector('.gradient-border').style.width = cpuUsage + '%';
// Add more real-time updates as needed
}
setInterval(updatePerformanceMetrics, 3000);
</script>
</body>
</html>