Volet interactif de livraison de nourriture
Un composant complexe et interactif de livraison de nourriture et de restauration avec des effets de néons, des couleurs vives et de multiples éléments interactifs. Conçu pour la réactivité et la prise en charge du mode sombre.
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>Composants associés
Composante des composantes interactives
Composant de composants interactifs avec un design minimaliste/plat, une palette de couleurs de tons de terre et un niveau de complexité complexe pour un tableau de bord, mis en œuvre avec Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
Composante des composantes interactives
Un composant interactif conçu pour les plateformes éducatives, avec des tons dégradés chauds de coucher de soleil, des transitions douces et la prise en charge du mode sombre. Il comprend des cartes cliquables qui changent d’apparence au survol ou au focus.