検索コンポーネント

カテゴリ

マップ

インタラクティブな地理地図

Maps コンポーネント

Neumorphism スタイル、ダークモードのサポート、プレースホルダー画像を備えたレスポンシブマップコンポーネント。

                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Maps Component</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .neumorphism-card {
      border-radius: 20px;
      background: #e0e0e0;
      box-shadow: 7px 7px 15px #bebebe,
                  -7px -7px 15px #ffffff;
      transition: all 0.3s ease;
    }
    .neumorphism-card:hover {
      box-shadow: 5px 5px 10px #bebebe,
                  -5px -5px 10px #ffffff;
    }
    .dark .neumorphism-card {
      background: #333333;
      box-shadow: 7px 7px 15px #2b2b2b,
                  -7px -7px 15px #3b3b3b;
    }
    .dark .neumorphism-card:hover {
      box-shadow: 5px 5px 10px #2b2b2b,
                  -5px -5px 10px #3b3b3b;
    }
  </style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 p-8">

  <div class="neumorphism-card max-w-sm mx-auto overflow-hidden md:max-w-md dark:text-white">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://images.unsplash.com/photo-1594399418882-cf049f2a25c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Map image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Location</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Central Park</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A large urban park in New York City.</p>
        <div class="mt-4 flex items-center">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
          </svg>
          <span class="ml-2 text-gray-500 dark:text-gray-400">New York, NY</span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

Maps コンポーネント

マテリアルデザインのスタイル設定とダークテーマのサポートを備えたレスポンシブマップコンポーネントで、Tailwind CSS を使用して構築されています。

開けるプレビュー

                <div class="h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex items-center justify-between">
      <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Maps</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Explore</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Saved</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contribute</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-grow container mx-auto px-[10px] py-4 grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Map Area (Placeholder) -->
    <section class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="h-[400px] bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300">
        Map will be loaded here
      </div>
    </section>

    <!-- Sidebar/Details Area -->
    <aside class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Location Details</h2>
      <div class="space-y-4">
        <!-- Example Detail Item -->
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">I</div>
          <p class="text-gray-700 dark:text-gray-300">Information about the location.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">P</div>
          <p class="text-gray-700 dark:text-gray-300">Photos and imagery here.</p>
        </div>
        <div class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-10 h-10 bg-red-500 rounded-full flex items-center justify-center text-white font-bold">R</div>
          <p class="text-gray-700 dark:text-gray-300">Reviews and ratings go here.</p>
        </div>
      </div>
    </aside>
  </main>

  <!-- Footer -->
  <footer class="bg-white dark:bg-gray-800 shadow-md mt-4">
    <div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
      © 2023 Maps Component
    </div>
  </footer>
</div>

Maps コンポーネント

ニューモーフィズムでスタイル設定されたレスポンシブマップコンポーネントで、ダークテーマをサポートし、プレースホルダー画像を備えています。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Component</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-xl w-full md:w-96">
        <img src="https://picsum.photos/400/300" alt="Placeholder Map" class="rounded-lg w-full h-auto" />
    </div>
    <div class="flex mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-white dark:border-gray-800 shadow-md" />
        <div class="ml-3">
            <p class="text-sm text-gray-700 dark:text-gray-300">User Name</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Location</p>
        </div>
    </div>
</div>

Maps コンポーネント

Tailwind CSS を利用した、レスポンシブ効果とダークテーマのサポートを備えた glassmorphism デザインを特徴とするマップコンポーネント。

開けるプレビュー

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Our Locations</h2>
    <div class="relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Map Image" class="rounded-lg" />
      <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location A</p>
      </div>
      <div class="absolute top-1/4 right-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location B</p>
      </div>
      <div class="absolute bottom-0 left-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location C</p>
      </div>
    </div>
    <div class="flex justify-between mt-4">
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">View More</button>
      <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Contact Us</button>
    </div>
  </div>
</div>

Maps コンポーネント

3Dデザイン要素とTailwind CSSを使用したダークテーマのサポートを備えたレスポンシブマップコンポーネント。

開けるプレビュー

                <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
    <div class="max-w-6xl w-full mx-auto sm:px-6 lg:px-8">
        <div class="mt-8 overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 items-center bg-white dark:bg-gray-800 overflow-hidden shadow transform transition-all duration-300 perspective-1000">
                <div class="p-6">
                    <div class="flex items-center">
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500 dark:text-gray-400"><path d="M12 12l-2 10l-4 -14l9 -4 4 10L20 12 12 12z"></path></svg>
                        <div class="ml-4 text-lg leading-7 font-semibold"><a href="#" class="underline text-gray-900 dark:text-white">Interactive Map</a></div>
                    </div>

                    <div class="ml-12">
                        <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
                            Explore locations with our interactive 3D map. Discover new places and get directions easily.
                        </div>
                    </div>
                </div>

                <div class="relative w-full h-64 md:h-auto" style="transform: translateZ(20px);">
                     <img src="https://picsum.photos/seed/map-placeholder/600/400" alt="Map Placeholder" class="absolute inset-0 w-full h-full object-cover">
                </div>
            </div>
        </div>
    </div>
</div>