Компонент тепловых карт
Отзывчивый компонент тепловой карты, разработанный с эффектами стекломорфизма, с полупрозрачными элементами, похожими на матовое стекло, и поддержкой темного стиля темы, использующий Tailwind CSS.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
<h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
<div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
<img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
</div>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
</div>
</div>
</div>
</div>
Связанные компоненты
Компонент тепловых карт
Отзывчивый компонент тепловых карт со стилем стекломорфизма, аналогичной цветовой схемой и умеренной сложностью для портфолио, с поддержкой темных тем.
Компонент тепловых карт
Простой отзывчивый компонент тепловой карты, разработанный в стиле ретро/винтаж с использованием пастельной цветовой схемы, подходит для информационных панелей. Он имеет поддержку темной темы с Tailwind CSS.
Компонент тепловых карт
Адаптивный компонент тепловой карты для социальных сетей с дизайном скевоморфизма, дополнительными цветами и поддержкой темного режима с использованием Tailwind CSS.