Компонент тепловых карт
Компонент тепловых карт, выполненный в стиле брутализм с земляными тонами, умеренной сложностью и отзывчивым дизайном с поддержкой темных тем.
HTML-код
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg">
<h2 class="text-2xl font-bold mb-4 text-brown-800 dark:text-brown-200">Project Heat Maps</h2>
<p class="mb-6 text-gray-700 dark:text-gray-300">Showcasing data visualizations through temperature maps in a bold and raw design style.</p>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
<img src="https://picsum.photos/400/200?random=1" alt="Heat Map 1" class="rounded-lg mb-2">
<h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 1</h3>
<p class="text-brown-600 dark:text-brown-300">Description of heat map 1, highlighting interesting data points.</p>
</div>
<div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
<img src="https://picsum.photos/400/200?random=2" alt="Heat Map 2" class="rounded-lg mb-2">
<h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 2</h3>
<p class="text-brown-600 dark:text-brown-300">Description of heat map 2, showcasing a different aspect of the data.</p>
</div>
<div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
<img src="https://picsum.photos/400/200?random=3" alt="Heat Map 3" class="rounded-lg mb-2">
<h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 3</h3>
<p class="text-brown-600 dark:text-brown-300">Description of heat map 3, emphasizing key trends.</p>
</div>
</div>
<div class="mt-6">
<h3 class="font-bold text-xl text-brown-800 dark:text-brown-200">Team</h3>
<div class="flex space-x-4 mt-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar 3" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
</div>
</div>
</div>Связанные компоненты
Компонент тепловых карт
Простой отзывчивый компонент тепловой карты, разработанный в стиле ретро/винтаж с использованием пастельной цветовой схемы, подходит для информационных панелей. Он имеет поддержку темной темы с Tailwind CSS.
Компонент тепловых карт
Минималистичный компонент тепловых карт, демонстрирующий портфолио с интерактивными функциями, адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS.
Компонента вибрационных тепловых карт Neumorphism
Отзывчивый компонент тепловых карт с дизайном Neumorphism, использующий яркую цветовую схему и умеренную сложность. Включает поддержку темного режима и эффектов наведения. Построен с помощью простых классов HTML и Tailwind CSS, дополнен небольшим блоком CSS для пользовательских теней Neumorphism и цветовых уровней.