Luxury_Autumn_Maps_Component
高級旅行や観光のWebサイト向けに設計されたレスポンシブでエレガントなマップコンポーネントで、秋の色とダークモードのサポートが特徴です。
HTMLコード
<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>関連コンポーネント
ミニマリスト単色ビジネスマップコンポーネント
ビジネスや企業の Web サイト向けに設計されたレスポンシブでインタラクティブなマップ コンポーネントで、ミニマリストのフラット デザイン、単色の配色、ダーク モードのサポートが特徴です。プレースホルダー、マップ画像、および連絡先の詳細プレースホルダーが含まれています。
Maps コンポーネント
マテリアル デザイン スタイルで設計された複雑なマップ コンポーネントで、ダッシュボードに適しています。レスポンシブ要素、インタラクティブ機能を統合し、類似の配色を使用してダークモードの美学をサポートします。
Retro Maps コンポーネント
レトロ/ビンテージの美学、鮮やかな配色、ビジネス/企業目的を備えた、シンプルでレスポンシブなダークモード互換のマップコンポーネントで、Tailwind CSSで構築されています。