Компонент «Карты»
Сложный компонент карт, выполненный в стиле Material Design, подходит для дашбордов. Он объединяет адаптивные элементы, интерактивные функции и поддерживает эстетику темного режима с использованием аналогичной цветовой схемы.
HTML-код
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Map 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">City Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Interactive city map visualization.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Map 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Terrain Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Detailed terrain mapping for analysis.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Map 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Traffic Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Real-time traffic data and analytics.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Map 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Weather Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Interactive weather visualization.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=5" alt="Map 5" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Population Density Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Visual representation of population spread.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/300/200?random=6" alt="Map 6" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Resource Distribution Map</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Distribution of various resources across the region.</p>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент «Карты»
Компонент адаптивных карт со стилем неуморфизма, поддержкой темной темы и изображениями-заполнителями.
Компонент «Карты»
Сложный и яркий компонент карты для социальных сетей с микровзаимодействиями, адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
Компонент «Карты»
Компонент адаптивных карт, выполненный в скевоморфном стиле, с мягкими пастельными тонами и богатым интерфейсом, подходящим для социальных сетей. Компонент поддерживает как светлый, так и темный режимы и включает в себя множество интерактивных элементов.