Maps コンポーネント

<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>