Composant Cartes thermiques
Un composant de cartes thermiques réactif avec une esthétique rétro/vintage, conçu à des fins de blog/contenu, avec des éléments interactifs et la prise en charge du thème sombre.
HTML Code
<div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-center mb-6">Heat Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg p-4">
<h3 class="text-xl font-semibold">Popular Topics</h3>
<ul class="mt-2">
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 1 - <span class="font-medium">75%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 2 - <span class="font-medium">65%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 3 - <span class="font-medium">55%</span></li>
<li class="py-2 border-b border-gray-700 hover:bg-gray-800 transition">Topic 4 - <span class="font-medium">85%</span></li>
</ul>
</div>
<div class="bg-gradient-to-r from-blue-400 to-green-400 rounded-lg p-4">
<h3 class="text-xl font-semibold">Recent Reads</h3>
<div class="flex flex-col space-y-4 mt-2">
<div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
<div>
<h4 class="text-lg font-medium">Article Title 1</h4>
<p class="text-sm text-gray-400">Author Name</p>
</div>
</div>
<div class="flex items-center border border-gray-700 rounded p-2 hover:bg-gray-800 transition">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mr-3">
<div>
<h4 class="text-lg font-medium">Article Title 2</h4>
<p class="text-sm text-gray-400">Author Name</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl font-bold text-center">Interactive Heat Map</h3>
<div class="relative mt-4">
<img src="https://picsum.photos/800/400" alt="Heat Map" class="w-full h-auto rounded-lg">
<div class="absolute top-0 left-0 right-0 bottom-0 flex justify-between items-center">
<div class="p-2 bg-red-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">High Interest</p>
</div>
<div class="p-2 bg-yellow-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">Moderate Interest</p>
</div>
<div class="p-2 bg-green-500 bg-opacity-75 rounded-full cursor-pointer hover:scale-105 transform transition">
<p class="text-white font-semibold">Low Interest</p>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant Cartes thermiques
Un composant de cartes thermiques minimaliste présentant un portefeuille avec des fonctionnalités interactives, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Cartes thermiques
Un composant de cartes thermiques réactif conçu avec Tailwind CSS, avec des micro-interactions et la prise en charge des thèmes sombres, à l’aide d’images et d’avatars de repère.
Cartes thermiques Composante 42
Un composant de carte thermique réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, prenant en charge le mode sombre et présentant des images et des avatars aléatoires.