Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Product Gallery</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-16 p-6 antialiased" x-data="{ activeImg: 0, images: ['https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1000&h=1000&fit=crop', 'https://plus.unsplash.com/premium_photo-1681426687411-21986b0626a8?w=1000&h=1000&fit=crop', 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=1000&h=1000&fit=crop', 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=1000&h=1000&fit=crop'] }"> <div class="max-w-4xl w-full bg-white p-6 rounded-[4rem] shadow-4xl border border-white"> <div class="space-y-6"> <!-- Main Image Container --> <div class="relative aspect-square bg-slate-50 rounded-[3rem] overflow-hidden group border border-slate-50"> <img :src="images[activeImg]" class="h-full w-full object-cover transition-all duration-700" :key="activeImg"> <!-- Navigation Overlays --> <div class="absolute inset-0 flex items-center justify-between px-6 opacity-0 group-hover:opacity-100 transition-opacity"> <button @click="activeImg = (activeImg - 1 + images.length) % images.length" class="h-12 w-12 bg-white/90 backdrop-blur rounded-2xl flex items-center justify-center text-slate-800 shadow-xl hover:bg-white transition-all cursor-pointer"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" /></svg> </button> <button @click="activeImg = (activeImg + 1) % images.length" class="h-12 w-12 bg-white/90 backdrop-blur rounded-2xl flex items-center justify-center text-slate-800 shadow-xl hover:bg-white transition-all cursor-pointer"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7" /></svg> </button> </div> <!-- Fullscreen Toggle --> <button class="absolute bottom-6 right-6 h-12 w-12 bg-slate-900/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-900/30"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg> </button> </div> <!-- Thumbnails Grid --> <div class="grid grid-cols-4 gap-4 px-2"> <template x-for="(img, index) in images" :key="index"> <button @click="activeImg = index" class="aspect-square rounded-2xl overflow-hidden border-2 transition-all shadow-sm" :class="activeImg === index ? 'border-indigo-600 ring-4 ring-indigo-50' : 'border-transparent hover:border-slate-200'" > <img :src="img" class="h-full w-full object-cover"> </button> </template> </div> <div class="pt-6 text-center border-t border-slate-50"> <p class="text-[11px] font-black text-slate-400 uppercase tracking-[0.4em]">Visual Protocol Identification</p> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
