Composants
Composants de visualisation de données
Composant de visualisation des données (néon/lueur)
Composant de visualisation des données (néon/lueur)
Un composant complexe de visualisation de données pour les applications SaaS avec des effets de néon/lueur, des couleurs neutres chaudes et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300 relative overflow-hidden">
<!-- Background Glow Effect (Subtle) -->
<div class="absolute inset-0 bg-gradient-to-br from-stone-200 via-stone-50 to-stone-200 dark:from-stone-800 dark:via-stone-950 dark:to-stone-800 rounded-lg animate-pulse-glow-bg opacity-20 dark:opacity-10 blur-xl"></div>
<div class="relative z-10">
<!-- Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-stone-200 dark:border-stone-700 pb-4">
<h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-50 mb-2 sm:mb-0 relative">
Overall Performance
<span class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-sky-400 dark:from-lime-600 dark:to-sky-600 rounded-full shadow-glow-sm"></span>
</h2>
<div class="flex items-center space-x-3 text-sm">
<span class="text-stone-500 dark:text-stone-400">Last 30 Days</span>
<button class="flex items-center px-4 py-2 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700 rounded-full text-stone-700 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition-all duration-200 relative group overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-r from-transparent via-lime-400 to-transparent opacity-0 group-hover:opacity-20 animate-shine"></span>
<span class="relative">Filter <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></span>
</button>
</div>
</div>
<!-- Key Metrics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Metric Card 1 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-lime-300 to-transparent dark:from-lime-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">New Users</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">12,345 <span class="text-lime-500 text-base font-normal ml-1">+12.5%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-lime-400 dark:bg-lime-600 w-3/4 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- Metric Card 2 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-sky-300 to-transparent dark:from-sky-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Revenue</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">$87,654 <span class="text-red-500 text-base font-normal ml-1">-3.2%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-sky-400 dark:bg-sky-600 w-2/3 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- Metric Card 3 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-purple-300 to-transparent dark:from-purple-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Active Sessions</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4,567 <span class="text-lime-500 text-base font-normal ml-1">+8.1%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-purple-400 dark:bg-purple-600 w-4/5 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- Metric Card 4 -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-orange-300 to-transparent dark:from-orange-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Conversion Rate</p>
<p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4.7% <span class="text-lime-500 text-base font-normal ml-1">+0.8%</span></p>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-orange-400 dark:bg-orange-600 w-1/2 rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Large Chart (Left) -->
<div class="lg:col-span-2 bg-stone-50 dark:bg-stone-800 rounded-lg p-6 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-tr from-stone-100 to-transparent dark:from-stone-900 opacity-10 blur-xl animate-pulse-glow-reverse"></div>
<div class="relative z-10">
<h3 class="text-xl font-semibold mb-4 text-stone-800 dark:text-stone-50">
Monthly Trends
<span class="block w-1/4 h-0.5 bg-gradient-to-r from-sky-400 to-purple-400 dark:from-sky-600 dark:to-purple-600 rounded-full mt-1 shadow-glow-sm"></span>
</h3>
<!-- Placeholder for Chart -->
<div class="w-full h-64 sm:h-80 md:h-96 bg-stone-100 dark:bg-stone-900 rounded-md flex items-center justify-center text-stone-400 dark:text-stone-600 border border-dashed border-stone-300 dark:border-stone-700 relative">
<p>Line Chart Placeholder</p>
<!-- Example data points with glow -->
<div class="absolute top-1/2 left-1/4 w-3 h-3 bg-lime-400 dark:bg-lime-600 rounded-full shadow-glow-md animate-bounce-slow"></div>
<div class="absolute top-1/3 left-1/2 w-3 h-3 bg-sky-400 dark:bg-sky-600 rounded-full shadow-glow-md animate-bounce-slow delay-100"></div>
<div class="absolute top-3/4 left-3/4 w-3 h-3 bg-purple-400 dark:bg-purple-600 rounded-full shadow-glow-md animate-bounce-slow delay-200"></div>
</div>
</div>
</div>
<!-- Small Charts / Stats (Right) -->
<div class="lg:col-span-1 flex flex-col gap-6">
<!-- Top Source Card -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-teal-300 to-transparent dark:from-teal-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Top Source</h3>
<div class="flex items-center mb-2">
<img src="https://picsum.photos/40/40?grayscale&random=1" alt="Source Icon" class="w-10 h-10 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<p class="font-medium text-stone-900 dark:text-stone-100">Google Search</p>
<p class="text-sm text-stone-500 dark:text-stone-400">55% of traffic</p>
</div>
</div>
<div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
<div class="h-full bg-teal-400 dark:bg-teal-600 w-[55%] rounded-full shadow-glow-xs"></div>
</div>
</div>
</div>
<!-- User Activity Stream -->
<div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-bl from-amber-300 to-transparent dark:from-amber-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
<div class="relative z-10">
<h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Recent Activity</h3>
<ul class="space-y-3">
<li class="flex items-center text-sm">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<span class="font-medium text-stone-900 dark:text-stone-100">John D.</span> viewed <span class="text-sky-500 dark:text-sky-400">'Analytics Dashboard'</span>
<span class="block text-xs text-stone-500 dark:text-stone-400">2 minutes ago</span>
</div>
</li>
<li class="flex items-center text-sm">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<span class="font-medium text-stone-900 dark:text-stone-100">Jane S.</span> updated <span class="text-purple-500 dark:text-purple-400">'Campaign Data'</span>
<span class="block text-xs text-stone-500 dark:text-stone-400">15 minutes ago</span>
</div>
</li>
<li class="flex items-center text-sm">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
<div>
<span class="font-medium text-stone-900 dark:text-stone-100">Mike R.</span> logged in
<span class="block text-xs text-stone-500 dark:text-stone-400">1 hour ago</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tailwind CSS animated glows and pulse effects -->
<style>
@keyframes pulse-glow-bg {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.02); opacity: 0.3; }
}
@keyframes pulse-glow-bg-dark {
0%, 100% { transform: scale(1); opacity: 0.1; }
50% { transform: scale(1.02); opacity: 0.15; }
}
@keyframes pulse-glow-sm {
0%, 100% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.01); opacity: 0.3; }
}
@keyframes pulse-glow-reverse {
0%, 100% { transform: scale(1); opacity: 0.1; }
50% { transform: scale(0.98); opacity: 0.15; }
}
@keyframes shine {
0% { transform: translateX(-100%); }
60% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animate-pulse-glow-bg {
animation: pulse-glow-bg 6s infinite ease-in-out;
}
.dark .animate-pulse-glow-bg {
animation: pulse-glow-bg-dark 6s infinite ease-in-out;
}
.animate-pulse-glow-sm {
animation: pulse-glow-sm 4s infinite ease-in-out;
}
.animate-pulse-glow-reverse {
animation: pulse-glow-reverse 5s infinite ease-in-out;
}
.animate-shine {
animation: shine 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce-slow {
animation: bounce-slow 3s infinite ease-in-out;
}
.shadow-glow-xs {
filter: drop-shadow(0 0px 3px var(--tw-shadow-color));
--tw-shadow-color: rgba(74, 222, 128, 0.6);
}
.dark .shadow-glow-xs {
--tw-shadow-color: rgba(34, 197, 94, 0.6);
}
.shadow-glow-sm {
filter: drop-shadow(0 0px 8px var(--tw-shadow-color));
--tw-shadow-color: rgba(74, 222, 128, 0.8);
}
.dark .shadow-glow-sm {
--tw-shadow-color: rgba(34, 197, 94, 0.8);
}
.shadow-glow-md {
filter: drop-shadow(0 0px 10px var(--tw-shadow-color));
--tw-shadow-color: rgba(59, 130, 246, 0.8);
}
.dark .shadow-glow-md {
--tw-shadow-color: rgba(37, 99, 235, 0.8);
}
</style>Composants associés
Composants de visualisation de données
Un composant de visualisation de données conçu dans un style brutaliste avec Tailwind CSS, avec des mises en page réactives et la prise en charge des thèmes sombres.
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un composant de visualisation de données élégant et sophistiqué conçu pour les plateformes de rencontres et les réseaux sociaux, avec une palette de couleurs en niveaux de gris et une mise en page réactive avec prise en charge du mode sombre. Affiche les statistiques des utilisateurs et les mesures de connexion.
Composants de visualisation de données
Un composant complexe de visualisation des données du tableau de bord avec une esthétique rétro/vintage et des schémas de couleurs complémentaires.