Interactive Food Delivery Component
A complex, interactive food delivery and restaurant component featuring neon glow effects, vibrant colors, and multiple interactive elements. Designed for responsiveness and dark mode support.
HTML Code
<div class="font-sans bg-gray-950 text-gray-50 dark:bg-black p-4 sm:p-6 lg:p-8 relative overflow-hidden">
<!-- Glowing Background Elements -->
<div class="absolute top-0 -left-64 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-purple-600"></div>
<div class="absolute top-0 -right-64 w-96 h-96 bg-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-rose-600"></div>
<div class="absolute -bottom-16 left-1/4 transform -translate-x-1/2 w-96 h-96 bg-green-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-lime-600"></div>
<div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
<div class="text-center mb-10 lg:mb-16">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 animate-text-glow-slow relative">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-pink-400 to-green-400 dark:from-sky-400 dark:via-fuchsia-400 dark:to-lime-400">Feast with the Glow!</span>
</h2>
<p class="text-lg sm:text-xl text-gray-300 dark:text-gray-400 mb-8 max-w-3xl mx-auto animate-fade-in animation-delay-500">
Discover exquisite flavors and glowing deals, delivered fresh to your door.
</p>
<!-- Search Bar with Neon Border -->
<div class="relative max-w-xl mx-auto">
<input type="text" placeholder="Search for restaurants or dishes..." class="w-full p-4 pl-12 rounded-xl bg-gray-800 dark:bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-4 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black transition-all duration-300
border-2 border-transparent focus:border-blue-500
shadow-neon-blue-sm hover:shadow-neon-blue
dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple
focus:shadow-neon-blue-md dark:focus:shadow-neon-purple-md">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10m-7 0a7 7 0 1014 0a7 7 0 10-14 0"></path><path d="m21 21-6-6"></path></svg>
</div>
</div>
<!-- Category Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
<!-- Category 1 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-blue-500 dark:hover:border-purple-500
shadow-neon-blue-sm hover:shadow-neon-blue-md
dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple-md
cursor-pointer">
<img src="https://picsum.photos/id/1080/100/100" alt="Pizza" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200 glow-on-text">Pizza</span>
</div>
<!-- Category 2 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-pink-500 dark:hover:border-rose-500
shadow-neon-pink-sm hover:shadow-neon-pink-md
dark:shadow-neon-rose-sm dark:hover:shadow-neon-rose-md
cursor-pointer">
<img src="https://picsum.photos/id/1050/100/100" alt="Burgers" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200 glow-on-text">Burgers</span>
</div>
<!-- Category 3 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-green-500 dark:hover:border-lime-500
shadow-neon-green-sm hover:shadow-neon-green-md
dark:shadow-neon-lime-sm dark:hover:shadow-neon-lime-md
cursor-pointer">
<img src="https://picsum.photos/id/1005/100/100" alt="Sushi" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-green-500 dark:ring-lime-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200 glow-on-text">Sushi</span>
</div>
<!-- Category 4 -->
<div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300
bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
border-2 border-transparent
hover:border-yellow-500 dark:hover:border-yellow-500
shadow-neon-yellow-sm hover:shadow-neon-yellow-md
dark:shadow-neon-orange-sm dark:hover:shadow-neon-orange-md
cursor-pointer">
<img src="https://picsum.photos/id/200/100/100" alt="Desserts" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-yellow-500 dark:ring-orange-500 glow-on-hover-img">
<span class="font-semibold text-lg text-white group-hover:text-yellow-300 dark:group-hover:text-orange-300 transition-colors duration-200 glow-on-text">Desserts</span>
</div>
</div>
<!-- Featured Restaurants Section -->
<h3 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-white relative animate-fade-in animation-delay-700">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-green-400 dark:from-fuchsia-400 dark:to-lime-400">Top Rated Establishments</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Restaurant Card 1 -->
<div class="group relative p-6 rounded-xl overflow-hidden
bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
border-2 border-transparent
hover:border-blue-500 dark:hover:border-purple-500
shadow-neon-blue-sm hover:shadow-neon-blue-md transition-all duration-300 cursor-pointer">
<img src="https://picsum.photos/id/1060/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300 ">
<h4 class="text-xl font-bold mb-2 text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200">The Neon Bistro</h4>
<p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Gourmet fusion with a modern twist.</p>
<div class="flex items-center text-yellow-400 mb-4">
<svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
<span class="ml-1 font-semibold">4.9</span> <span class="text-gray-400">(1.5k reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
<button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300
bg-gradient-to-r from-blue-600 to-pink-600
hover:from-blue-500 hover:to-pink-500
shadow-neon-blue-md hover:shadow-neon-blue-lg
dark:from-purple-600 dark:to-rose-600
dark:hover:from-purple-500 dark:hover:to-rose-500
dark:shadow-neon-purple-md dark:hover:shadow-neon-purple-lg">
Order Now
</button>
</div>
</div>
<!-- Restaurant Card 2 -->
<div class="group relative p-6 rounded-xl overflow-hidden
bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
border-2 border-transparent
hover:border-pink-500 dark:hover:border-rose-500
shadow-neon-pink-sm hover:shadow-neon-pink-md transition-all duration-300 cursor-pointer">
<img src="https://picsum.photos/id/1069/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
<h4 class="text-xl font-bold mb-2 text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200">Glow Grille & Bar</h4>
<p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Classic comfort food with a lively atmosphere.</p>
<div class="flex items-center text-yellow-400 mb-4">
<svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
<span class="ml-1 font-semibold">4.7</span> <span class="text-gray-400">(980 reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
<button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300
bg-gradient-to-r from-pink-600 to-green-600
hover:from-pink-500 hover:to-green-500
shadow-neon-pink-md hover:shadow-neon-pink-lg
dark:from-rose-600 dark:to-lime-600
dark:hover:from-rose-500 dark:hover:to-lime-500
dark:shadow-neon-rose-md dark:hover:shadow-neon-rose-lg">
Order Now
</button>
</div>
</div>
<!-- Restaurant Card 3 -->
<div class="group relative p-6 rounded-xl overflow-hidden
bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
border-2 border-transparent
hover:border-green-500 dark:hover:border-lime-500
shadow-neon-green-sm hover:shadow-neon-green-md transition-all duration-300 cursor-pointer">
<img src="https://picsum.photos/id/1084/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
<h4 class="text-xl font-bold mb-2 text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200">Electric Eats Diner</h4>
<p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Modern diner fare, always electrifying.</p>
<div class="flex items-center text-yellow-400 mb-4">
<svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
<span class="ml-1 font-semibold">4.8</span> <span class="text-gray-400">(1.2k reviews)</span>
</div>
<div class="flex justify-between items-center">
<span class="text-lg font-semibold text-red-400 glow-on-text">Closed</span>
<button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 opacity-70 cursor-not-allowed
bg-gray-600
shadow-neon-gray-sm
dark:bg-gray-700
dark:shadow-neon-gray-sm">
Closed
</button>
</div>
</div>
</div>
<!-- Testimonials Section -->
<h3 class="text-3xl sm:text-4xl font-bold mt-16 mb-8 text-center text-white relative animate-fade-in animation-delay-900">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-blue-400 dark:from-orange-400 dark:to-purple-400">What Our Patrons Say (Glowingly)</span>
</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Testimonial 1 -->
<div class="relative p-6 rounded-xl
bg-gray-800/70 dark:bg-gray-900/70
border-2 border-transparent
shadow-neon-blue-sm dark:shadow-neon-purple-sm transition-all duration-300">
<p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
"Absolutely mesmerizing! The app's interface is stunning with its vibrant neon glow, making ordering food a truly delightful experience. And the delivery speed? Electrifyingly fast!"
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
<div>
<p class="font-bold text-white text-lg">Anya Sharma</p>
<p class="text-gray-400 text-sm">Food Enthusiast</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="relative p-6 rounded-xl
bg-gray-800/70 dark:bg-gray-900/70
border-2 border-transparent
shadow-neon-pink-sm dark:shadow-neon-rose-sm transition-all duration-300">
<p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
"Never thought ordering takeout could be this cool! The UI feels futuristic and the glow effects are a fantastic touch. Found my new favorite burger joint through this platform. Highly recommend!"
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
<div>
<p class="font-bold text-white text-lg">Michael Chen</p>
<p class="text-gray-400 text-sm">Tech Foodie</p>
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes text-glow-slow {
0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(71, 185, 255, 0.4), 0 0 15px rgba(255, 0, 255, 0.4); }
50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(71, 185, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.6); }
}
.dark .animate-text-glow-slow {
animation-name: dark-text-glow-slow;
}
@keyframes dark-text-glow-slow {
0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(128, 0, 128, 0.4), 0 0 15px rgba(0, 255, 0, 0.4); }
50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(128, 0, 128, 0.6), 0 0 30px rgba(0, 255, 0, 0.6); }
}
@keyframes fade-in {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-blob { animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.animate-fade-in { animation: fade-in 1s ease-out forwards; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-900 { animation-delay: 0.9s; }
/* Tailwind Custom Shadows (approximate neon glow) */
.shadow-neon-blue-sm {
box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
}
.hover\:shadow-neon-blue,
.focus\:shadow-neon-blue-md {
box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
}
.shadow-neon-blue-md {
box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
}
.hover\:shadow-neon-blue-lg {
box-shadow: 0 0 15px rgba(0, 179, 255, 0.8), 0 0 30px rgba(0, 179, 255, 0.6);
}
.shadow-neon-pink-sm {
box-shadow: 0 0 5px rgba(255, 0, 179, 0.5);
}
.hover\:shadow-neon-pink-md {
box-shadow: 0 0 10px rgba(255, 0, 179, 0.7), 0 0 20px rgba(255, 0, 179, 0.5);
}
.hover\:shadow-neon-pink-lg {
box-shadow: 0 0 15px rgba(255, 0, 179, 0.8), 0 0 30px rgba(255, 0, 179, 0.6);
}
.shadow-neon-green-sm {
box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
.hover\:shadow-neon-green-md {
box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5);
}
.hover\:shadow-neon-green-lg {
box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.6);
}
.shadow-neon-yellow-sm {
box-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
}
.hover\:shadow-neon-yellow-md {
box-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.5);
}
.shadow-neon-gray-sm {
box-shadow: 0 0 5px rgba(128, 128, 128, 0.3);
}
/* Dark Mode specific shadows */
.dark .shadow-neon-purple-sm {
box-shadow: 0 0 5px rgba(128, 0, 128, 0.5);
}
.dark .hover\:shadow-neon-purple,
.dark .focus\:shadow-neon-purple-md {
box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
}
.dark .shadow-neon-purple-md {
box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
}
.dark .hover\:shadow-neon-purple-lg {
box-shadow: 0 0 15px rgba(128, 0, 128, 0.8), 0 0 30px rgba(128, 0, 128, 0.6);
}
.dark .shadow-neon-rose-sm {
box-shadow: 0 0 5px rgba(255, 0, 100, 0.5);
}
.dark .hover\:shadow-neon-rose-md {
box-shadow: 0 0 10px rgba(255, 0, 100, 0.7), 0 0 20px rgba(255, 0, 100, 0.5);
}
.dark .hover\:shadow-neon-rose-lg {
box-shadow: 0 0 15px rgba(255, 0, 100, 0.8), 0 0 30px rgba(255, 0, 100, 0.6);
}
.dark .shadow-neon-lime-sm {
box-shadow: 0 0 5px rgba(128, 255, 0, 0.5);
}
.dark .hover\:shadow-neon-lime-md {
box-shadow: 0 0 10px rgba(128, 255, 0, 0.7), 0 0 20px rgba(128, 255, 0, 0.5);
}
.dark .hover\:shadow-neon-lime-lg {
box-shadow: 0 0 15px rgba(128, 255, 0, 0.8), 0 0 30px rgba(128, 255, 0, 0.6);
}
.dark .shadow-neon-orange-sm {
box-shadow: 0 0 5px rgba(255, 128, 0, 0.5);
}
.dark .hover\:shadow-neon-orange-md {
box-shadow: 0 0 10px rgba(255, 128, 0, 0.7), 0 0 20px rgba(255, 128, 0, 0.5);
}
.dark .shadow-neon-gray-sm {
box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
}
/* Image and text glow on hover */
.glow-on-hover-img:hover {
filter: drop-shadow(0 0 8px currentColor);
}
.group:hover .glow-on-text {
filter: drop-shadow(0 0 5px currentColor);
}
</style>
</div>Related Components
Interactive Components Component
Interactive Components Component with Skeuomorphism design, Analogous color scheme, and Moderate complexity for Blog/Content purpose. Responsive design with dark theme support. No JavaScript code.
Interactive Portfolio Component
A responsive portfolio component with microinteractions and a pastel color scheme, supporting dark mode with Tailwind CSS.
Interactive Components Component
A brutalist-inspired interactive component for a blog, featuring high contrast earth tones, responsive design, and dark mode support.