Maps コンポーネント
Tailwind CSS を利用した、レスポンシブ効果とダーク テーマのサポートを備えた glassmorphism デザインを特徴とするマップ コンポーネント。
HTMLコード
<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>