Maps 컴포넌트
대시보드에 적합한 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>