LuxuryFoodMapsComponent
An elegant and responsive food/restaurant map component with a candy-themed color scheme, suitable for desktop, tablet, and mobile, including dark mode support. Features a prominent map area and a list of premium restaurant locations.
HTML Code
<div class="font-sans antialiased text-gray-800 dark:text-gray-100 bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-850 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in transition-all duration-500 transform hover:scale-[1.005]">
<div class="md:flex md:h-[600px] lg:h-[700px]">
<!-- Left Section: Map -->
<div class="md:w-3/5 bg-gray-200 dark:bg-gray-700 h-96 md:h-auto overflow-hidden relative">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.259902636712!2d-73.98565158459423!3d40.74844057932785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a542e7!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1678912345678!5m2!1sen!2sus"
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade" aria-label="Interactive map showing restaurant locations.">
</iframe>
<div class="absolute top-4 left-4 p-3 bg-white dark:bg-gray-900 rounded-full shadow-lg flex items-center space-x-2 text-sm font-semibold opacity-90 backdrop-blur-sm">
<svg class="w-5 h-5 text-pink-500" 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="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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span class="text-gray-700 dark:text-gray-300">Explore nearby flavors</span>
</div>
</div>
<!-- Right Section: Restaurant List -->
<div class="md:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
<div>
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 tracking-tight leading-tight">
<span class="block">Sweet Spots.</span>
<span class="block text-purple-600 dark:text-purple-400">Savory Treats.</span>
</h2>
<p class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 mb-8">
Discover premium culinary experiences near you. From delightful desserts to gourmet dinners.
</p>
<div class="space-y-6 max-h-96 md:max-h-[calc(100vh-300px)] overflow-y-auto pr-2 scrollbar-thumb-pink-300 scrollbar-track-purple-100 dark:scrollbar-thumb-pink-700 dark:scrollbar-track-purple-900 scrollbar-w-2">
<!-- Restaurant Card 1 -->
<div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-pink-50 dark:bg-gray-700 border border-transparent hover:border-pink-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
<img src="https://picsum.photos/80/80?random=1" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">The Sugar Plum Bistro</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">123 Candyland Rd, Suite A</p>
<div class="flex items-center mt-1">
<span class="text-yellow-500 text-lg">★★★★★</span>
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.9)</span>
</div>
<button class="mt-3 px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-pink-300">
View Details
</button>
</div>
</div>
<!-- Restaurant Card 2 -->
<div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-purple-50 dark:bg-gray-700 border border-transparent hover:border-purple-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
<img src="https://picsum.photos/80/80?random=2" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Mint & Basil Eatery</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">456 Green Street, Level 2</p>
<div class="flex items-center mt-1">
<span class="text-yellow-500 text-lg">★★★★☆</span>
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.5)</span>
</div>
<button class="mt-3 px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-purple-600 hover:to-indigo-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
View Details
</button>
</div>
</div>
<!-- Restaurant Card 3 -->
<div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-blue-50 dark:bg-gray-700 border border-transparent hover:border-blue-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
<img src="https://picsum.photos/80/80?random=3" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Gourmet Glaze Cafe</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">789 Sweet Avenue, Unit B</p>
<div class="flex items-center mt-1">
<span class="text-yellow-500 text-lg">★★★★★</span>
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.8)</span>
</div>
<button class="mt-3 px-4 py-2 bg-gradient-to-r from-blue-500 to-pink-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-blue-600 hover:to-pink-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
View Details
</button>
</div>
</div>
<!-- Restaurant Card 4 -->
<div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-green-50 dark:bg-gray-700 border border-transparent hover:border-green-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
<img src="https://picsum.photos/80/80?random=4" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
<div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Jelly Bean Junction</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">101 Lollipop Lane, Apt 1</p>
<div class="flex items-center mt-1">
<span class="text-yellow-500 text-lg">★★★★☆</span>
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.6)</span>
</div>
<button class="mt-3 px-4 py-2 bg-gradient-to-r from-green-500 to-blue-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-green-600 hover:to-blue-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-300">
View Details
</button>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-center">
<button class="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-lg font-bold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700">
Find More Restaurants
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Custom scrollbar styles for demonstration/specificity -- provided it's configured in Tailwind config for utility classes -->
<style>
/* For Webkit browsers (Chrome, Safari) */
.scrollbar-w-2::-webkit-scrollbar {
width: 8px;
}
.scrollbar-track-purple-100::-webkit-scrollbar-track {
background: #f3e8ff;
}
.scrollbar-thumb-pink-300::-webkit-scrollbar-thumb {
background-color: #fbcfe8;
border-radius: 20px;
border: 2px solid #f3e8ff;
}
.dark .scrollbar-track-purple-900::-webkit-scrollbar-track {
background: #2a0c4e;
}
.dark .scrollbar-thumb-pink-700::-webkit-scrollbar-thumb {
background-color: #be185d;
border-radius: 20px;
border: 2px solid #2a0c4e;
}
</style>Related Components
Retro Maps Component
A simple, responsive maps component with a retro/vintage design, analogous color scheme, and dark theme support, using Tailwind CSS. Suitable for blog or content websites.
Brutalist Maps Component
A complex, Brutalist-style e-commerce map component with monochromatic colors and dark mode support using Tailwind CSS. It displays product locations with brutalist design elements.
Maps Component
A responsive maps component designed with skeuomorphic style, featuring soft pastel colors and a rich interface suitable for social media networking. The component supports both light and dark modes and includes multiple interactive elements.