検索コンポーネント

カテゴリ

マップ

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

Luxury_Autumn_Maps_Component

高級旅行や観光のWebサイト向けに設計されたレスポンシブでエレガントなマップコンポーネントで、秋の色とダークモードのサポートが特徴です。

                <div class="bg-stone-50 dark:bg-stone-950 min-h-screen p-4 sm:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white dark:bg-stone-900 rounded-3xl shadow-xl overflow-hidden md:flex elevation-200">
    
    <!-- Left Panel: Map Preview -->
    <div class="md:w-3/5 relative min-h-[300px] md:min-h-auto">
      <img src="https://picsum.photos/1200/800/?random=1&blur=2" alt="Map Preview" class="w-full h-full object-cover brightness-90 dark:brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-6 md:p-10">
        <h2 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-2">
          Explore Hidden Gems
        </h2>
      </div>
      <button class="absolute top-6 right-6 p-3 rounded-full bg-white dark:bg-stone-800 text-stone-700 dark:text-stone-300 shadow-lg hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-stone-300 dark:focus:ring-stone-700" aria-label="View Live Map">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h-5v-1h5.381c.217 0 .419-.074.587-.206 1.745-1.229 2.542-3.873 1.282-5.733L7.02 9.083c-.882-1.322-.44-3.109 1.096-3.771 1.764-.784 3.731-.225 4.542 1.411.085.176.136.377.144.584L14.5 12h2.5l-.276-2.76A5 5 0 0013.2 4.14C11.5 1.458 8 1.875 6.07 4.128L3.11 7.24a4.998 4.998 0 00-1.07 4.137l.45 2.25c.162.81.71 1.636 1.44 2.115l.235.155c.677.447 1.503.654 2.316.654H9.75z" />
        </svg>
      </button>
    </div>

    <!-- Right Panel: Location Details & Search -->
    <div class="md:w-2/5 p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-4">Discover Your Next Adventure</h3>
        <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6">
          Uncover curated experiences and stunning destinations. From serene landscapes to bustling cityscapes, find your perfect escape.
        </p>

        <!-- Search Bar -->
        <div class="relative mb-6">
          <input type="text" placeholder="Search locations, landmarks..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500">
          <div class="absolute inset-y-0 left-0 flex items-center pl-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>

        <!-- Featured Locations -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 auto-rows-fr">
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=2" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Autumn Peaks</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">Mountains, SCENIC</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=3" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Vineyard Valley</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">WINE, RURAL</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=4" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Lakeside Retreat</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">NATURE, CALM</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=5" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Historic Old Town</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">CITY, CULTURAL</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-8">
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 rounded-xl bg-orange-700 text-white font-semibold tracking-wide hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-lg transform hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 5.273L3 9.77v.068a.5.5 0 01-.5.5h-.069l-.16.03a.5.5 0 01-.177.018l-1.077.016a.5.5 0 01-.497-.48l-.001-.01c0-.27.224-.492.497-.492a.5.5 0 01.49-.408l.01-.01.01-.005a.5.5 0 01.372-.09m14.975 1.01a8 8 0 00-11.314-11.314M12 17.5V12h-.01m0 0l-5-5m5 5l5-5" />
          </svg>
          Plan Your Trip Now
        </a>
      </div>
    </div>

  </div>
</div>

Gradient_Forest_Maps_Component

教育プラットフォーム向けのシンプルでレスポンシブなマップコンポーネントで、フォレストグリーンのグラデーションパレットとスムーズなトランジション、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-lime-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full rounded-xl shadow-2xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-500 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-emerald-200 dark:border-emerald-700">
    <div class="p-6 sm:p-8 lg:p-10 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-4 sm:mb-6 leading-tight transition-colors duration-500">
        Explore Geographic Concepts
      </h2>
      <p class="text-lg sm:text-xl text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 transition-colors duration-500">
        Visualize and understand complex geographic data with interactive maps.
      </p>

      <div class="relative w-full h-64 sm:h-80 md:h-96 lg:h-112 rounded-lg overflow-hidden shadow-xl border border-emerald-300 dark:border-emerald-600 group">
        <!-- Placeholder for an interactive map -->
        <img src="https://picsum.photos/1200/800?random=1&blur=2" alt="Placeholder map illustration with abstract geographical features" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 group-focus-within:scale-105 opacity-80 dark:opacity-70" aria-hidden="true">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/30 to-lime-200/30 dark:from-emerald-800/40 dark:to-lime-900/40 flex items-center justify-center p-4 rounded-lg">
          <div class="text-white drop-shadow-lg text-center">
            <p class="text-xl sm:text-2xl font-bold mb-2">Interactive Map Area</p>
            <p class="text-sm sm:text-base">Content for map embedding would go here.</p>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
        bg-gradient-to-r from-emerald-500 to-lime-600 hover:from-emerald-600 hover:to-lime-700 
        dark:from-emerald-600 dark:to-lime-700 dark:hover:from-emerald-700 dark:hover:to-lime-800 
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white dark:focus:ring-offset-gray-900">
          
          View Course Maps
          <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Cyberpunk_Gaming_Maps_Component

ダークな背景、ネオンのアクセント、類似の配色を特徴とする、シンプルでレスポンシブなサイバーパンクをテーマにしたゲームインターフェースのマップコンポーネントです。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 md:p-8 bg-gray-950 dark:bg-black text-gray-200 min-h-screen font-mono">
    <div class="max-w-4xl mx-auto bg-gray-900 dark:bg-gray-950 border-2 border-fuchsia-600 dark:border-purple-700 shadow-2xl shadow-fuchsia-800/50 dark:shadow-purple-900/50 rounded-lg overflow-hidden relative">
        <!-- Neon Glitch Overlay -->
        <div class="absolute inset-0 z-0 opacity-10 blur-xl animate-pulse" style="background-image: linear-gradient(to right, #8A2BE2, #A020F0, #FF00FF);"></div>

        <div class="relative z-10 p-4 sm:p-6 md:p-8">
            <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-fuchsia-400 dark:text-purple-400 uppercase tracking-widest leading-tight border-b-2 border-fuchsia-700 dark:border-purple-600 pb-2">
                <span class="block text-xs text-fuchsia-600 dark:text-purple-500 mb-1">SYSTEM MAP</span>
                NEO-TOKYO SECTOR 7
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Map Placeholder -->
                <div class="order-2 md:order-1 bg-gray-800 dark:bg-gray-900 border border-fuchsia-700 dark:border-purple-700 rounded-md overflow-hidden relative group aspect-video sm:aspect-[4/3] md:aspect-square lg:aspect-video">
                    <img src="https://picsum.photos/id/237/600/400?grayscale&blur=2" alt="Cyberpunk Map Grid" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-900/30 via-purple-700/20 to-indigo-900/30 opacity-70 group-hover:opacity-90 transition-opacity duration-300"></div>
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <span class="text-fuchsia-300 dark:text-purple-300 text-6xl md:text-8xl font-black opacity-10 select-none">MAP</span>
                    </div>
                    <div class="absolute top-2 left-2 text-fuchsia-400 dark:text-purple-400 text-sm md:text-base">[23:45:01] GRID: A-7</div>
                    <div class="absolute bottom-2 right-2 flex space-x-2">
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">+</button>
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">-</button>
                    </div>
                </div>

                <!-- Map Controls/Info -->
                <div class="order-1 md:order-2 space-y-4">
                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">NAVIGATION</h3>
                        <div class="flex flex-wrap gap-2">
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">TARGET</span> SECTOR A
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">PING</span> LOCATION
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">ROUTE</span> OPTIMIZE
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">ACTIVE DATASTREAM</h3>
                        <p class="text-xs text-gray-400 leading-relaxed">
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> INCOMING ENCRYPTED TRANSMISSION #0XF3C.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> LOCAL GRID STATUS: STABLE. TRAFFIC FLOW NORM <span class="text-green-400">[OPTIMAL]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> ANOMALY DETECTED: SECTOR 7-B. <span class="text-yellow-400">[INVESTIGATE]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> SYSTEM HEALTH: <span class="text-fuchsia-400 dark:text-purple-400">98%</span>. DIAGNOSTICS COMPLETE.
                        </p>
                        <div class="mt-3 flex justify-end">
                            <button class="px-4 py-2 bg-fuchsia-900 dark:bg-purple-900 text-fuchsia-300 dark:text-purple-300 text-sm rounded-sm hover:bg-fuchsia-800 dark:hover:bg-purple-800 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
                                CLEAR LOG
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">WAYPOINTS</h3>
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></span>
                        <span>HQ: 12.4km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-blue-600 rounded-full"></span>
                        <span>DATANODE ALPHA: 3.1km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-green-600 rounded-full"></span>
                        <span>SAFEZONE γ: 7.8km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-yellow-600 rounded-full animate-ping"></span>
                        <span class="text-yellow-400">UNKNOWN SIG: 0.5km</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ミニマリスト単色ビジネスマップコンポーネント

ビジネスや企業の Web サイト向けに設計されたレスポンシブでインタラクティブなマップコンポーネントで、ミニマリストのフラットデザイン、単色の配色、ダークモードのサポートが特徴です。プレースホルダー、マップ画像、および連絡先の詳細プレースホルダーが含まれています。

開けるプレビュー

                <section class="py-16 sm:py-20 bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-4">
        Find Us On The Map
      </h2>
      <p class="text-lg sm:xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        Visit our office or get in touch through our contact details below. We look forward to connecting with you.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      <!-- Map Placeholder -->
      <div class="relative rounded-lg overflow-hidden shadow-xl dark:shadow-2xl aspect-video w-full">
        <img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of our location" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
        <div class="absolute bottom-4 left-4 right-4 p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-md shadow-lg text-sm sm:text-base">
          <p class="font-semibold text-gray-900 dark:text-white mb-1">Our Global Headquarters</p>
          <p class="text-gray-700 dark:text-gray-300">123 Business Avenue, Suite 100, Metropolis City, Country 12345</p>
        </div>
      </div>

      <!-- Contact Information -->
      <div class="bg-white dark:bg-gray-800 p-8 sm:p-10 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">
          Get In Touch
        </h3>
        <ul class="space-y-6">
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Address:</p>
              <p class="text-gray-700 dark:text-gray-300">123 Maple Street, Business District, Cityville, State 01234</p>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Phone:</p>
              <a href="tel:+1234567890" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">+1 (234) 567-890</a>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Email:</p>
              <a href="mailto:info@example.com" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">info@example.com</a>
            </div>
          </li>
        </ul>
        <div class="mt-8">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
            Get Directions
            <svg class="ml-3 -mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.525 17.525A7.989 7.989 0 0012 3c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.072 0 3.999-.74 5.485-1.975L19 21l2-2-3.475-3.475z" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

スキューモーフィックマップコンポーネント

スキューモーフィックなデザイン、アーストーンの配色、ダークモードのサポートを備えたシンプルでレスポンシブなマップコンポーネントで、ポートフォリオに適しています。

開けるプレビュー

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-200 to-stone-400 dark:from-stone-800 dark:to-stone-950 shadow-2xl rounded-3xl border-4 border-stone-500 dark:border-stone-700 max-w-4xl mx-auto my-8"> <div class="w-full h-64 md:h-96 rounded-2xl overflow-hidden border-2 border-stone-600 dark:border-stone-400 shadow-inner"> <img src="https://picsum.photos/seed/map/800/600" alt="Skeuomorphic Map" class="w-full h-full object-cover grayscale brightness-90 contrast-120"> </div> <div class="mt-6 text-center"> <h3 class="text-2xl md:text-3xl font-serif text-stone-800 dark:text-stone-200 drop-shadow-md">Location Details</h3> <p class="mt-2 text-md md:text-lg text-stone-700 dark:text-stone-300 font-sans">123 Rustic Road, Earthville</p> <button class="mt-5 px-6 py-3 bg-gradient-to-r from-amber-700 to-amber-900 text-white font-bold rounded-full shadow-lg hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50 transition transform hover:-translate-y-1 active:translate-y-0"> View Large Map </button> </div> <div class="mt-8 flex justify-around items-center px-4"> <div class="text-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Explorer </p> </div> <div class="text-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mx-auto border-4 border-stone-600 dark:border-stone-400 shadow-md"> <p class="text-stone-700 dark:text-stone-300 text-sm mt-2"> Cartographer </p> </div> </div> </div>

Maps コンポーネント

Glassmorphism デザイン、グレースケールの配色、シンプルなレイアウトを備えたシンプルな Maps コンポーネント。応答性が高く、ダークモードをサポートしています。

開けるプレビュー

                <div class="relative flex items-center justify-center w-full h-96 bg-gray-300 dark:bg-gray-700 overflow-hidden" style="backdrop-filter: blur(10px); background-color: rgba(209, 213, 219, 0.3); dark:background-color: rgba(55, 65, 81, 0.3);">
  <div class="absolute inset-0 z-0">
    <img src="https://picsum.photos/seed/maps/800/600" alt="Map background" class="object-cover w-full h-full">
  </div>
  <div class="relative z-10 p-6 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 rounded-lg shadow-lg text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Find Us Here</h2>
    <p class="text-gray-700 dark:text-gray-300">Our location on the map.</p>
  </div>
</div>

Glassmorphism Maps コンポーネント

ソーシャルメディア用のGlassmorphismマップコンポーネント

開けるプレビュー

                <div class="glassmorphism-maps-component relative h-96 overflow-hidden rounded-lg shadow-xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg">
  <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/600');"></div>
  <div class="relative h-full flex flex-col justify-between p-6 bg-white bg-opacity-10 dark:bg-gray-900 dark:bg-opacity-10">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-300 text-sm">📍 On an adventure</p>
      </div>
    </div>
    <div class="text-right">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
        View Location
      </button>
    </div>
  </div>
</div>

Brutalist ダッシュボードマップコンポーネント

鮮やかな色、高コントラスト、複雑なインタラクティブ要素、レスポンシブデザイン、Tailwind CSS を使用したダークテーマのサポートを備えたブルータリズムスタイルのダッシュボードマップコンポーネント。

開けるプレビュー

                <div class="bg-yellow-300 dark:bg-purple-900 text-gray-900 dark:text-gray-100 min-h-screen p-8 font-mono">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold mb-8 border-b-4 border-red-500 pb-2">Dashboard Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Map Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-blue-500 pb-2">Geographical Data</h2>
        <div class="h-64 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">
          [Interactive Map Placeholder]
        </div>
        <div class="mt-4 grid grid-cols-2 gap-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric A</h3>
            <p class="text-xl text-green-600 dark:text-green-400">1,245</p>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Metric B</h3>
            <p class="text-xl text-red-600 dark:text-red-400">489</p>
          </div>
        </div>
      </div>

      <!-- Data Visualization Section -->
      <div class="bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
        <h2 class="text-2xl font-bold mb-4 border-b-2 border-purple-500 pb-2">Key Metrics</h2>
        <div class="space-y-4">
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">Sales Performance</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
          <div class="bg-gray-200 dark:bg-gray-600 p-4 border-2 border-black dark:border-lime-400">
            <h3 class="font-bold mb-2">User Engagement</h3>
            <div class="h-24 bg-gray-400 dark:bg-gray-700 border-2 border-black dark:border-lime-400 flex items-center justify-center text-gray-700 dark:text-gray-400">[Chart Placeholder]</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Table Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 p-6 border-4 border-black dark:border-lime-400 shadow-xl">
      <h2 class="text-2xl font-bold mb-4 border-b-2 border-orange-500 pb-2">Recent Activity</h2>
      <table class="min-w-full border-collapse border border-black dark:border-lime-400">
        <thead>
          <tr>
            <th class="border border-black dark:border-lime-400 p-2 text-left">User</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Action</th>
            <th class="border border-black dark:border-lime-400 p-2 text-left">Timestamp</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>John Doe</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Viewed Report</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:30</td>
          </tr>
          <tr>
            <td class="border border-black dark:border-lime-400 p-2 flex items-center">
               <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-black dark:border-lime-400">
              <span>Jane Smith</span>
            </td>
            <td class="border border-black dark:border-lime-400 p-2">Updated Dashboard</td>
            <td class="border border-black dark:border-lime-400 p-2">2023-10-27 10:45</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Maps コンポーネント

Glassmorphism スタイルでデザインされたレスポンシブ Maps コンポーネントで、ダークテーマと Tailwind CSS クラスが特徴です。データの視覚化とコントロールパネルを備えたダッシュボードに適しています。

開けるプレビュー

                <div class="bg-white bg-opacity-20 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-50 rounded-lg p-6 shadow-lg overflow-hidden">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map View</h3>
            <img src="https://picsum.photos/600/300" alt="Map" class="rounded-lg w-full" />
        </div>
        <div class="bg-white bg-opacity-40 backdrop-blur-md dark:bg-gray-700 dark:bg-opacity-50 rounded-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Statistics</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4" />
                <div>
                    <p class="text-sm text-gray-600 dark:text-gray-300">John Doe</p>
                    <p class="text-xl font-semibold text-gray-800 dark:text-gray-200">150 Visits</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Map Controls</h3>
        <div class="flex justify-between mt-2">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Zoom In</button>
            <button class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800">Zoom Out</button>
        </div>
    </div>
</div>

Retro Maps コンポーネント

レトロ/ビンテージの美学、鮮やかな配色、ビジネス/企業目的を備えた、シンプルでレスポンシブなダークモード互換のマップコンポーネントで、Tailwind CSSで構築されています。

開けるプレビュー

                <section class="bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Location</h2>
    <div class="relative">
      <img src="https://picsum.photos/seed/maps/800/400" alt="Map of our location" class="w-full h-96 object-cover rounded-lg shadow-lg">
      <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50 rounded-lg"></div>
      <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
        <h3 class="text-2xl font-semibold mb-2">Find Us Here</h3>
        <p class="text-gray-300">123 Main Street, Anytown, USA</p>
      </div>
    </div>
  </div>
</section>