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 Grid</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 min-h-screen pt-16 p-6 antialiased"> <div class="max-w-7xl mx-auto space-y-12"> <div class="flex justify-between items-end"> <div> <h2 class="text-3xl font-black text-slate-900 tracking-tight">Neural Module Marketplace</h2> <p class="text-slate-500 mt-2">Premium logic components for your distributed cluster.</p> </div> <div class="flex gap-4"> <select class="px-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 cursor-pointer"> <option>Sort by: Newest</option> <option>Price: Low to High</option> <option>Price: High to Low</option> </select> </div> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Product 1 --> <div class="group relative bg-white border border-slate-100 rounded-[2.5rem] overflow-hidden hover:shadow-2xl hover:shadow-slate-200/50 transition-all"> <div class="aspect-square bg-slate-50 relative overflow-hidden"> <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=500&h=500&fit=crop" class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"> <button class="absolute top-4 right-4 h-10 w-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center text-slate-400 hover:text-rose-500 hover:bg-white transition-all shadow-sm"> <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" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg> </button> </div> <div class="p-6 space-y-4"> <div class="flex justify-between items-start"> <div> <h3 class="font-bold text-slate-900 group-hover:text-indigo-600 transition-colors">Core Alpha Module</h3> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Tier 1 Protocol</p> </div> <p class="font-black text-slate-900">$299</p> </div> <button class="w-full py-3 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all cursor-pointer">Add to Manifest</button> </div> </div> <!-- Product 2 --> <div class="group relative bg-white border border-slate-100 rounded-[2.5rem] overflow-hidden hover:shadow-2xl hover:shadow-slate-200/50 transition-all"> <div class="aspect-square bg-slate-50 relative overflow-hidden"> <img src="https://plus.unsplash.com/premium_photo-1681426687411-21986b0626a8?w=500" class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute top-4 left-4 px-3 py-1 bg-indigo-600 text-white text-[9px] font-black uppercase tracking-widest rounded-full shadow-lg shadow-indigo-200">Featured</div> <button class="absolute top-4 right-4 h-10 w-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center text-rose-500 hover:bg-white transition-all shadow-sm"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg> </button> </div> <div class="p-6 space-y-4"> <div class="flex justify-between items-start"> <div> <h3 class="font-bold text-slate-900 group-hover:text-indigo-600 transition-colors">Kinetic Sync Bridge</h3> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Cross-Sector Logic</p> </div> <p class="font-black text-slate-900">$549</p> </div> <button class="w-full py-3 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all cursor-pointer">Add to Manifest</button> </div> </div> <!-- Product 3 --> <div class="group relative bg-white border border-slate-100 rounded-[2.5rem] overflow-hidden hover:shadow-2xl hover:shadow-slate-200/50 transition-all"> <div class="aspect-square bg-slate-50 relative overflow-hidden"> <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=500&h=500&fit=crop" class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"> <button class="absolute top-4 right-4 h-10 w-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center text-slate-400 hover:text-rose-500 hover:bg-white transition-all shadow-sm"> <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" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg> </button> </div> <div class="p-6 space-y-4"> <div class="flex justify-between items-start"> <div> <h3 class="font-bold text-slate-900 group-hover:text-indigo-600 transition-colors">Spectral Proxy XI</h3> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Encryption Core</p> </div> <p class="font-black text-slate-900">$820</p> </div> <button class="w-full py-3 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all cursor-pointer">Add to Manifest</button> </div> </div> <!-- Product 4 --> <div class="group relative bg-white border border-slate-100 rounded-[2.5rem] overflow-hidden hover:shadow-2xl hover:shadow-slate-200/50 transition-all"> <div class="aspect-square bg-slate-50 relative overflow-hidden"> <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=500" class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-500"> <div class="absolute top-4 left-4 px-3 py-1 bg-slate-900 text-white text-[9px] font-black uppercase tracking-widest rounded-full">Out of Stock</div> <button class="absolute top-4 right-4 h-10 w-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center text-slate-400 hover:text-rose-500 hover:bg-white transition-all shadow-sm"> <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" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg> </button> </div> <div class="p-6 space-y-4 opacity-75"> <div class="flex justify-between items-start"> <div> <h3 class="font-bold text-slate-900">Vanguard Logic Seal</h3> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Security Manifest</p> </div> <p class="font-black text-slate-900">$125</p> </div> <button class="w-full py-3 bg-slate-100 text-slate-400 rounded-xl text-[10px] font-black uppercase tracking-widest cursor-not-allowed">Restocking</button> </div> </div> </div> </div> </body> </html>
