구성 요소 지도 Maps 컴포넌트

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>

관련 구성 요소

Brutalist Maps 컴포넌트

단색 색상과 다크 모드가 있는 복잡한 브루탈리즘 스타일의 전자상거래 지도 컴포넌트는 Tailwind CSS를 사용하여 지원합니다. 브루탈리즘 디자인 요소로 제품 위치를 표시합니다.

열다

Maps 컴포넌트

Tailwind CSS를 사용하여 3D 디자인 요소와 어두운 테마를 지원하는 반응형 지도 구성 요소입니다.

열다

Maps 컴포넌트

스큐어모픽 스타일로 디자인된 반응형 지도 구성 요소로, 부드러운 파스텔 색상과 소셜 미디어 네트워킹에 적합한 풍부한 인터페이스를 특징으로 합니다. 이 구성 요소는 밝은 모드와 어두운 모드를 모두 지원하며 여러 대화형 요소를 포함합니다.

열다