Maps 컴포넌트
교육용 플랫폼을 위해 설계된 반응형 지도와 같은 구성 요소로, 인터랙티브 요소와 다크 모드를 지원하는 부드러운 파스텔 색상을 특징으로 합니다. 미묘한 호버 및 활성 상태와 같은 미시적 상호 작용에 중점을 둡니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-900 font-sans">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:scale-[1.005] group">
<div class="relative">
<!-- Map Placeholder Image -->
<img src="https://picsum.photos/800/400?random=1" alt="Map illustration" class="w-full h-48 sm:h-64 object-cover object-center rounded-t-xl group-hover:brightness-90 transition-all duration-300">
<!-- Overlay for title and search -->
<div class="absolute inset-0 bg-blue-100/60 dark:bg-blue-900/60 flex flex-col justify-between p-4 sm:p-6 rounded-t-xl">
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-2 sm:space-y-0">
<h2 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-100 transition-colors duration-300">
Explore Learning Paths
</h2>
<div class="relative w-full sm:w-auto">
<input type="text" placeholder="Search locations or topics..." class="w-full sm:w-64 py-2 pl-10 pr-4 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-300 border border-gray-200 dark:border-gray-600 rounded-full focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-300 shadow-sm">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
</div>
</div>
</div>
<!-- Content Area: Locations/Topics -->
<div class="p-4 sm:p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Location Card 1 -->
<div class="group relative bg-blue-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-blue-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-blue-300">
<span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-blue-300 dark:group-hover:border-blue-500 transition-colors duration-300 pointer-events-none"></span>
<div class="flex items-start">
<div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
<img src="https://picsum.photos/100/100?random=2" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-blue-400/20 dark:bg-blue-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div>
<h3 class="text-lg font-semibold text-blue-700 dark:text-blue-200 group-hover:text-blue-800 dark:group-hover:text-blue-100 transition-colors duration-300">Introduction to AI</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Explore foundational concepts and applications of artificial intelligence.</p>
<a href="#" class="mt-2 inline-flex items-center text-blue-500 dark:text-blue-300 text-sm font-medium hover:underline hover:text-blue-600 dark:hover:text-blue-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-md">
View Course
<svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Location Card 2 -->
<div class="group relative bg-green-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-green-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-green-300">
<span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-green-300 dark:group-hover:border-green-500 transition-colors duration-300 pointer-events-none"></span>
<div class="flex items-start">
<div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
<img src="https://picsum.photos/100/100?random=3" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-green-400/20 dark:bg-green-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div>
<h3 class="text-lg font-semibold text-green-700 dark:text-green-200 group-hover:text-green-800 dark:group-hover:text-green-100 transition-colors duration-300">Data Science Fundamentals</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Learn the basics of data analysis, visualization, and machine learning.</p>
<a href="#" class="mt-2 inline-flex items-center text-green-500 dark:text-green-300 text-sm font-medium hover:underline hover:text-green-600 dark:hover:text-green-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 rounded-md">
View Course
<svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Location Card 3 -->
<div class="group relative bg-purple-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-purple-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-purple-300">
<span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-purple-300 dark:group-hover:border-purple-500 transition-colors duration-300 pointer-events-none"></span>
<div class="flex items-start">
<div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
<img src="https://picsum.photos/100/100?random=4" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-purple-400/20 dark:bg-purple-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div>
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-200 group-hover:text-purple-800 dark:group-hover:text-purple-100 transition-colors duration-300">Web Development Bootcamp</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Master frontend and backend development with hands-on projects.</p>
<a href="#" class="mt-2 inline-flex items-center text-purple-500 dark:text-purple-300 text-sm font-medium hover:underline hover:text-purple-600 dark:hover:text-purple-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 rounded-md">
View Course
<svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Location Card 4 -->
<div class="group relative bg-pink-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-pink-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-pink-300">
<span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-pink-300 dark:group-hover:border-pink-500 transition-colors duration-300 pointer-events-none"></span>
<div class="flex items-start">
<div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
<img src="https://picsum.photos/100/100?random=5" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
<div class="absolute inset-0 bg-pink-400/20 dark:bg-pink-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div>
<h3 class="text-lg font-semibold text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100 transition-colors duration-300">Creative Writing Workshop</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Unleash your imagination and refine your storytelling skills.</p>
<a href="#" class="mt-2 inline-flex items-center text-pink-500 dark:text-pink-300 text-sm font-medium hover:underline hover:text-pink-600 dark:hover:text-pink-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 rounded-md">
View Course
<svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Call to Action/Footer -->
<div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 flex justify-center">
<button class="px-6 py-3 bg-blue-500 text-white font-semibold rounded-full shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
Discover More Paths
</button>
</div>
</div>
</div>관련 구성 요소
Retro Maps 컴포넌트
Tailwind CSS를 사용하여 레트로/빈티지 디자인, 유사한 색 구성표 및 어두운 테마를 지원하는 간단하고 반응이 빠른 지도 구성 요소입니다. 블로그 또는 콘텐츠 웹사이트에 적합합니다.
Maps 컴포넌트
대시보드에 적합한 Material Design 스타일로 설계된 복잡한 지도 구성 요소입니다. 반응형 요소, 대화형 기능을 통합하고 유사한 색 구성표를 사용하여 다크 모드 미학을 지원합니다.