Maps Component
A complex maps component designed in Material Design style, suitable for dashboards. It integrates responsive elements, interactive features, and supports dark mode aesthetics using an analogous color scheme.
HTML Code
<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>Related Components
Maps Component
Maps Component with Skeuomorphism design, Triadic color scheme, Moderate complexity, and Social Media purpose. Responsive design with dark theme support using Tailwind CSS.
Gradient_Forest_Maps_Component
A simple, responsive map component for educational platforms, featuring a forest green gradient palette and smooth transitions, with dark mode support.