Neon_Glow_Marketplace_Component
Un composant de marché complexe avec des éléments lumineux et lumineux et une palette de couleurs triadique, conçu pour les plates-formes multifournisseurs. Les fonctionnalités incluent des cartes de produits, des catégories, des recherches et des profils d’utilisateurs, tous réactifs et avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-gray-900 via-zinc-950 to-purple-950 text-emerald-300 dark:from-black dark:via-zinc-950 dark:to-fuchsia-950 overflow-hidden font-sans relative">
<!-- Background Glows (Blurred) -->
<div class="absolute top-0 left-1/4 w-96 h-96 bg-fuchsia-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-fuchsia-700"></div>
<div class="absolute top-1/2 right-1/4 w-96 h-96 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-emerald-700"></div>
<div class="absolute bottom-0 left-1/2 w-96 h-96 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-cyan-700"></div>
<!-- Main Content Container -->
<div class="relative z-10 container mx-auto px-4 py-8 md:py-12">
<!-- Header/Navigation -->
<header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 shadow-neon-emerald">
<h1 class="text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-fuchsia-400 to-cyan-400 drop-shadow-neon-text mb-4 md:mb-0">
GlowMarket
</h1>
<nav class="flex flex-wrap gap-4 lg:gap-8 justify-center">
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Home
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Categories
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Vendors
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-cyan-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
Account
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-red-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</nav>
<div class="flex items-center gap-4 mt-4 md:mt-0">
<button class="flex items-center px-4 py-2 bg-emerald-600 rounded-lg text-white font-semibold hover:bg-emerald-700 transition duration-300 shadow-neon-emerald-sm relative overflow-hidden group">
<svg class="w-5 h-5 mr-2 text-white transform group-hover:rotate-6 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.01a1 1 0 000-2H3zm0 4a1 1 0 000 2h.01a1 1 0 000-2H3zm0 4a1 1 0 000 2h.01a1 1 0 100-2H3zm16 0a1 1 0 000 2h.01a1 1 0 100-2H19zm0-4a1 1 0 000 2h.01a1 1 0 000-2H19zm0-4a1 1 0 000 2h.01a1 1 0 000-2H19zM6 10a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm-8 4a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm-8 4a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zM12 4a2 2 0 100 4 2 2 0 000-4zm-8 8a2 2 0 100 4 2 2 0 000-4zm0-8a2 2 0 100 4 2 2 0 000-4zm8 0a2 2 0 100 4 2 2 0 000-4zm0 8a2 2 0 100 4 2 2 0 000-4zm8 0a2 2 0 100 4 2 2 0 000-4zM12 12a2 2 0 100 4 2 2 0 000-4zm0-4a2 2 0 100 4 2 2 0 000-4zM16 4a2 2 0 100 4 2 2 0 000-4zm0 8a2 2 0 100 4 2 2 0 000-4zm-4 4a2 2 0 100 4 2 2 0 000-4zM16 16a2 2 0 100 4 2 2 0 000-4zm-4-4a2 2 0 100 4 2 2 0 000-4z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path></svg>
Cart
<span class="absolute top-0 right-0 -mr-2 -mt-2 w-6 h-6 rounded-full bg-fuchsia-500 text-white text-xs flex items-center justify-center font-bold border-2 border-fuchsia-700 animate-pulse">3</span>
<div class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-600 via-fuchsia-600 to-cyan-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
</button>
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-500 shadow-neon-fuchsia-sm cursor-pointer hover:scale-110 transition-transform duration-300">
</div>
</header>
<!-- Search and Filters Section -->
<section class="mb-8 md:mb-12 p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 shadow-neon-fuchsia">
<div class="flex flex-col md:flex-row gap-4 items-stretch md:items-center">
<input type="text" placeholder="Search for products, vendors..." class="flex-grow px-5 py-3 rounded-lg bg-gray-700 focus:bg-gray-600 text-emerald-100 placeholder-emerald-300/60 border border-fuchsia-400/50 focus:border-fuchsia-400 outline-none text-lg transition-all duration-300 shadow-inner-neon-fuchsia caret-emerald-300">
<button class="px-6 py-3 bg-fuchsia-600 text-white rounded-lg font-semibold hover:bg-fuchsia-700 transition duration-300 shadow-neon-fuchsia justify-center flex items-center shrink-0">
<svg class="w-5 h-5 mr-2" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
Search
</button>
<select class="px-5 py-3 rounded-lg bg-gray-700 focus:bg-gray-600 text-emerald-100 border border-cyan-400/50 focus:border-cyan-400 outline-none text-lg transition-all duration-300 shadow-inner-neon-cyan shrink-0">
<option>All Categories</option>
<option>Electronics</option>
<option>Apparel</option>
<option>Gaming</option>
<option>Arts & Crafts</option>
</select>
</div>
<div class="flex flex-wrap gap-3 mt-4 items-center justify-center md:justify-start">
<span class="text-emerald-300 font-medium">Filters:</span>
<button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hover:text-emerald-100 transition duration-300 border border-emerald-400/30 shadow-inner-neon-emerald-sm">New Arrivals</button>
<button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hover:text-emerald-100 transition duration-300 border border-fuchsia-400/30 shadow-inner-neon-fuchsia-sm">Top Rated</button>
<button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hovering:text-emerald-100 transition duration-300 border border-cyan-400/30 shadow-inner-neon-cyan-sm">On Sale</button>
</div>
</section>
<!-- Featured Products Section -->
<section class="mb-8 md:mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-emerald-400 to-fuchsia-400 drop-shadow-neon-text mb-6 text-center md:text-left">
Featured Glows
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-emerald-500/30 shadow-neon-emerald backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1018/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-fuchsia-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Quantum Hoverboard</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Experience zero-gravity motion with our new Quantum Hoverboard, featuring customizable LED glow patterns.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$999.99</span>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-gray-500">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-emerald-600 to-cyan-600 text-white rounded-lg font-semibold hover:from-emerald-700 hover:to-cyan-700 transition duration-300 shadow-neon-cyan relative overflow-hidden group-hover:shadow-neon-emerald">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
<!-- Product Card 2 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-fuchsia-500/30 shadow-neon-fuchsia backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1025/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-cyan-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Aura Smartwatch Pro</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Track your vitals with a vibrant, customizable display. Features holographic projections for calls and messages.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$249.00</span>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-fuchsia-600 to-emerald-600 text-white rounded-lg font-semibold hover:from-fuchsia-700 hover:to-emerald-700 transition duration-300 shadow-neon-emerald relative overflow-hidden group-hover:shadow-neon-fuchsia">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
<!-- Product Card 3 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-cyan-500/30 shadow-neon-cyan backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<mark class="absolute top-3 left-3 bg-fuchsia-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md z-10 skew-x-[-10deg] animate-pulse glow-label">SALE!</mark>
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1040/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-emerald-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Sonic Soundbar X</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Immersive 3D audio experience with pulsating RGB lights that sync to your music. Connects wirelessly.</p>
<div class="flex items-center justify-between mb-4">
<div>
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$179.99</span>
<span class="text-sm text-gray-400 line-through ml-2">$200.00</span>
</div>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-cyan-600 to-fuchsia-600 text-white rounded-lg font-semibold hover:from-cyan-700 hover:to-fuchsia-700 transition duration-300 shadow-neon-fuchsia relative overflow-hidden group-hover:shadow-neon-cyan">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
<!-- Product Card 4 -->
<div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-emerald-500/30 shadow-neon-emerald backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<img src="https://picsum.photos/id/1043/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-fuchsia-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
<h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">GlowFlow Keyboard</h3>
<p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Ergonomic design with per-key RGB backlighting and tactile mechanical switches for ultimate gaming.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$129.00</span>
<div class="flex items-center">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-gray-500">★</span>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-emerald-600 to-cyan-600 text-white rounded-lg font-semibold hover:from-emerald-700 hover:to-cyan-700 transition duration-300 shadow-neon-cyan relative overflow-hidden group-hover:shadow-neon-emerald">
Add to Cart
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</div>
</div>
</section>
<!-- Popular Categories Section -->
<section class="mb-8 md:mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 via-cyan-400 to-emerald-400 drop-shadow-neon-text mb-6 text-center md:text-left">
Popular Categories
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
<!-- Category Card 1 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 text-center hover:shadow-neon-emerald transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/111/100/100" alt="Electronics Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-emerald-400 group-hover:border-emerald-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Electronics</p>
</a>
<!-- Category Card 2 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 text-center hover:shadow-neon-fuchsia transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/112/100/100" alt="Gaming Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-fuchsia-400 group-hover:border-fuchsia-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Gaming</p>
</a>
<!-- Category Card 3 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-cyan-500/30 text-center hover:shadow-neon-cyan transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/113/100/100" alt="Home Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-cyan-400 group-hover:border-cyan-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Smart Home</p>
</a>
<!-- Category Card 4 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 text-center hover:shadow-neon-emerald transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/114/100/100" alt="Wearables Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-emerald-400 group-hover:border-emerald-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Wearables</p>
</a>
<!-- Category Card 5 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 text-center hover:shadow-neon-fuchsia transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/115/100/100" alt="Audio Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-fuchsia-400 group-hover:border-fuchsia-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Audio</p>
</a>
<!-- Category Card 6 -->
<a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-cyan-500/30 text-center hover:shadow-neon-cyan transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<img src="https://picsum.photos/id/116/100/100" alt="Gadgets Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-cyan-400 group-hover:border-cyan-200 transition-colors duration-300">
<p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Gadgets</p>
</a>
</div>
</section>
<!-- Call to Action / Vendor Section -->
<section class="p-6 md:p-8 rounded-xl backdrop-blur-sm bg-gray-700/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 shadow-neon-fuchsia flex flex-col items-center justify-center text-center">
<h2 class="text-3xl lg:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-cyan-400 to-fuchsia-400 mb-4 drop-shadow-neon-text">
Become a Glow Vendor!
</h2>
<p class="text-lg md:text-xl text-emerald-200 mb-6 max-w-2xl">
Join our vibrant marketplace and showcase your unique glowing products to a global audience. Easy setup, powerful tools.
</p>
<button class="px-8 py-4 bg-gradient-to-r from-fuchsia-600 to-emerald-600 text-white rounded-lg font-bold text-xl hover:from-fuchsia-700 hover:to-emerald-700 transition duration-300 shadow-neon-fuchsia transform hover:scale-105 active:scale-95 animate-pulse-glow relative overflow-hidden">
Start Selling Today
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
</button>
</section>
</div>
<!-- Footer -->
<footer class="py-8 px-4 mt-12 bg-gray-900/70 dark:bg-black/70 border-t border-emerald-500/30 text-center text-emerald-400 shadow-inner-neon-emerald backdrop-blur-sm">
<p class="text-lg mb-2">© 2023 GlowMarket. All rights reserved.</p>
<div class="flex justify-center flex-wrap gap-x-6 gap-y-2 text-md">
<a href="#" class="hover:text-emerald-200 relative group">
Privacy Policy
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="hover:text-emerald-200 relative group">
Terms of Service
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="hover:text-emerald-200 relative group">
Contact Us
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-cyan-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</div>
</footer>
<!-- Custom Tailwind CSS (for glow effects and animation) -->
<style>
@keyframes blob {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0, 0) scale(1); }
}
.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;
}
.shadow-neon-emerald {
box-shadow: 0 0 15px rgba(52, 211, 153, 0.6),
0 0 30px rgba(52, 211, 153, 0.4),
0 0 45px rgba(52, 211, 153, 0.2);
}
.shadow-neon-emerald-sm {
box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}
.shadow-inner-neon-emerald {
box-shadow: inset 0 0 10px rgba(52, 211, 153, 0.4);
}
.shadow-inner-neon-emerald-sm {
box-shadow: inset 0 0 5px rgba(52, 211, 153, 0.4);
}
.shadow-neon-fuchsia {
box-shadow: 0 0 15px rgba(236, 72, 153, 0.6),
0 0 30px rgba(236, 72, 153, 0.4),
0 0 45px rgba(236, 72, 153, 0.2);
}
.shadow-neon-fuchsia-sm {
box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}
.shadow-inner-neon-fuchsia {
box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.4);
}
.shadow-inner-neon-fuchsia-sm {
box-shadow: inset 0 0 5px rgba(236, 72, 153, 0.4);
}
.shadow-neon-cyan {
box-shadow: 0 0 15px rgba(6, 182, 212, 0.6),
0 0 30px rgba(6, 182, 212, 0.4),
0 0 45px rgba(6, 182, 212, 0.2);
}
.shadow-neon-cyan-sm {
box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}
.shadow-inner-neon-cyan {
box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.4);
}
.shadow-inner-neon-cyan-sm {
box-shadow: inset 0 0 5px rgba(6, 182, 212, 0.4);
}
.drop-shadow-neon-text {
text-shadow: 0 0 5px rgba(255,255,255,0.7),
0 0 10px rgba(255,255,255,0.5),
0 0 15px rgba(255,255,255,0.3);
}
.drop-shadow-neon-fuchsia-sm {
text-shadow: 0 0 3px rgba(236, 72, 153, 0.8), 0 0 8px rgba(236, 72, 153, 0.6);
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 0 0 25px rgba(236, 72, 153, 0.5), 0 0 40px rgba(236, 72, 153, 0.3); }
50% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.9), 0 0 35px rgba(236, 72, 153, 0.7), 0 0 55px rgba(236, 72, 153, 0.5); }
}
.animate-pulse-glow {
animation: pulse-glow 2.5s infinite alternate ease-in-out;
}
mark.glow-label {
box-shadow: 0 0 10px rgba(236, 72, 153, 0.8), 0 0 20px rgba(236, 72, 153, 0.6);
}
/* Dark Mode Overrides (if required, though parent takes care of most) */
.dark .shadow-neon-emerald {
box-shadow: 0 0 15px rgba(16, 185, 129, 0.6),
0 0 30px rgba(16, 185, 129, 0.4),
0 0 45px rgba(16, 185, 129, 0.2);
}
.dark .shadow-neon-fuchsia {
box-shadow: 0 0 15px rgba(217, 70, 239, 0.6),
0 0 30px rgba(217, 70, 239, 0.4),
0 0 45px rgba(217, 70, 239, 0.2);
}
.dark .shadow-neon-cyan {
box-shadow: 0 0 15px rgba(34, 211, 238, 0.6),
0 0 30px rgba(34, 211, 238, 0.4),
0 0 45px rgba(34, 211, 238, 0.2);
}
</style>
</div>Composants associés
Composant de documentation Art Déco Violet
Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.
Composant fonctionnel du commerce électronique
Composant de commerce électronique de conception plate minimaliste avec palette de couleurs triadique et prise en charge réactive du mode sombre.
Composants fonctionnels
Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.