Composant Cartes thermiques
Composant de carte thermique 3D avec une palette de couleurs analogue, adapté à un portfolio. Il est réactif et prend en charge le mode sombre.
HTML Code
<div class="p-8 dark:bg-gray-900 min-h-screen">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center">3D Heat Map Portfolio</h2>
<!-- Responsive Grid for Heat Map Squares -->
<div class="grid grid-cols-7 sm:grid-cols-14 md:grid-cols-21 lg:grid-cols-28 gap-1">
{[...Array(98)].map((_, i) => (
<div key={i} class="w-6 h-6 rounded-md shadow-md transform hover:scale-110 transition-transform duration-200"
style={`background-color: hsl(${10 + i * 2}, 70%, ${50 + (i % 2) * 5}%); transform: rotateX(15deg) rotateY(15deg);`}></div>
))}
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Project 1 -->
<div class="bg-gradient-to-br from-green-300 to-teal-400 dark:from-green-700 dark:to-teal-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
<h3 class="text-2xl font-semibold text-white mb-3">Project Alpha Insights</h3>
<p class="text-white text-opacity-90 leading-relaxed">Showcasing data trends with a unique 3D heat map visualization. This interactive element provides deep insights into user engagement over time, making complex data easily digestible for stakeholders.</p>
<img src="https://picsum.photos/400/250?random=1" alt="Project Alpha" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Project 2 -->
<div class="bg-gradient-to-br from-blue-300 to-indigo-400 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
<h3 class="text-2xl font-semibold text-white mb-3">User Flow Analytics</h3>
<p class="text-white text-opacity-90 leading-relaxed">A detailed heat map demonstrating user navigation paths on a e-commerce platform. The 3D perspective highlights popular routes and potential bottlenecks, informing design optimizations.</p>
<img src="https://picsum.photos/400/250?random=2" alt="Project Beta" class="mt-4 rounded-lg shadow-md">
</div>
</div>
<div class="mt-12 text-center">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Meet the Creator</h3>
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 shadow-lg">
<p class="text-gray-700 dark:text-gray-300 text-lg">John Doe, Data Visualization Specialist</p>
<p class="text-gray-600 dark:text-gray-400 text-md mt-2">"Passionate about transforming complex data into beautiful and intuitive visual stories."</p>
</div>
</div>
</div>Composants associés
Composant Cartes thermiques
Un composant de cartes thermiques pour la consommation de blog/contenu, avec un design réactif avec prise en charge du mode sombre. Utilise une palette de couleurs en niveaux de gris et une complexité moyenne avec des fonctionnalités interactives. Pas de JavaScript, du HTML pur avec Tailwind CSS.
Composant Neumorphism Vibrant Heat Maps
Un composant de cartes thermiques réactif avec une conception Neumorphism, utilisant une palette de couleurs vives et une complexité modérée. Comprend la prise en charge du mode sombre et des effets de survol. Construit avec des classes HTML simples et CSS Tailwind, complétées par un petit bloc CSS pour des ombres et des niveaux de couleur Neumorphism personnalisés.
Composant Cartes thermiques
Un composant de carte thermique réactif conçu avec des effets de glassmorphism, avec des éléments translucides semblables à du verre dépoli et la prise en charge du style de thème sombre, à l’aide de Tailwind CSS.