Компонент «Карты»
Адаптивный компонент Maps, разработанный в стиле Glassmorphism, с темной темой и CSS-классами Tailwind. Подходит для дашбордов с визуализацией данных и панелей управления.
HTML-код
<div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
<img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
</div>
<div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
<div>
<p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
<p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
<div class="flex justify-between mt-2">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
<button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
</div>
</div>
</div>Связанные компоненты
Компонент «Карты»
Простой компонент Карт с дизайном Glassmorphism, цветовой схемой в оттенках серого и простой компоновкой. Он отзывчив и поддерживает темный режим.
Компонент бруталистских карт
Сложный компонент карты электронной коммерции в бруталистском стиле с монохроматическими цветами и поддержкой темного режима с использованием Tailwind CSS. На нем отображаются места расположения товаров с брутальными элементами дизайна.
Компонент «Карты»
Компонент адаптивных карт, выполненный в скевоморфном стиле, с мягкими пастельными тонами и богатым интерфейсом, подходящим для социальных сетей. Компонент поддерживает как светлый, так и темный режимы и включает в себя множество интерактивных элементов.