Компонент тепловых карт
Минималистичный компонент тепловых карт, демонстрирующий портфолио с интерактивными функциями, адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<div class="max-w-4xl mx-auto p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Example Heat Map Item -->
<div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
</div>
<div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
</div>
<div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
<p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
</div>
<!-- Add more items as needed -->
</div>
</div>Связанные компоненты
Luxury_Premium_Heatmap_Component
Элегантный и сложный компонент тепловой карты с триадальными цветами, разработанный для новостных и журналистских веб-сайтов, демонстрирующий популярность или вовлеченность статьи. Он отличается изысканной типографикой, тонкими градиентами и полной отзывчивостью с поддержкой темного режима.
Компонент тепловых карт
Монопространственный, вдохновленный разработчиками компонент тепловой карты с земляными тонами, предназначенный для консалтинга и услуг. Имеет сетчатый дисплей, имитирующий данные тепловой карты за разные дни, отзывчивый на всех устройствах и поддерживающий темный режим.
Компонент электронной коммерции тепловой карты
Минималистичный компонент тепловой карты в оттенках серого для электронной коммерции со сложным интерактивным дизайном. Отзывчивый и поддерживает темный режим.