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 Page Layout</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"> <!-- Breadcrumbs --> <nav class="flex items-center gap-3 text-[10px] font-black uppercase tracking-widest text-slate-400 mb-12"> <a href="#" class="hover:text-slate-900 transition-colors">Marketplace</a> <svg class="h-3 w-3" 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> <a href="#" class="hover:text-slate-900 transition-colors">Neural Modules</a> <svg class="h-3 w-3" 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> <span class="text-indigo-600">Core Alpha Sync Module</span> </nav> <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-start"> <!-- Visuals --> <div class="space-y-6"> <div class="aspect-square bg-white rounded-[3rem] border border-slate-100 shadow-2xl overflow-hidden group"> <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1000&h=1000&fit=crop" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-700"> </div> <div class="grid grid-cols-4 gap-6"> <div class="aspect-square bg-white rounded-2xl border-2 border-indigo-600 overflow-hidden cursor-pointer shadow-sm"> <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=200&h=200&fit=crop" class="h-full w-full object-cover"> </div> <div class="aspect-square bg-white rounded-2xl border border-slate-100 overflow-hidden cursor-pointer hover:border-indigo-200 transition-all opacity-60 hover:opacity-100"> <img src="https://plus.unsplash.com/premium_photo-1681426687411-21986b0626a8?w=200" class="h-full w-full object-cover"> </div> <div class="aspect-square bg-white rounded-2xl border border-slate-100 overflow-hidden cursor-pointer hover:border-indigo-200 transition-all opacity-60 hover:opacity-100"> <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=200&h=200&fit=crop" class="h-full w-full object-cover"> </div> <div class="aspect-square bg-white rounded-2xl border border-slate-100 overflow-hidden cursor-pointer hover:border-indigo-200 transition-all opacity-60 hover:opacity-100"> <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=200" class="h-full w-full object-cover"> </div> </div> </div> <!-- Info --> <div class="space-y-12"> <div class="space-y-6"> <div class="flex items-center justify-between"> <span class="px-4 py-1.5 bg-indigo-50 text-indigo-600 text-[10px] font-black uppercase tracking-widest rounded-full ring-1 ring-indigo-100">Vanguard Certified</span> <div class="flex items-center gap-1"> <div class="flex text-amber-400"> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> <svg class="h-4 w-4 text-slate-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> </div> <span class="text-xs font-bold text-slate-400">48 Manifests Verified</span> </div> </div> <h1 class="text-4xl lg:text-5xl font-black text-slate-900 tracking-tighter leading-none">Core Alpha Sync Module</h1> <p class="text-3xl font-black text-indigo-600 tracking-tighter">$299.00</p> <p class="text-slate-500 text-lg leading-relaxed max-w-xl">The foundation of every high-performance distributed network. The Core Alpha utilizes sub-cycle handshake protocols to ensure absolute manifest integrity across your entire regional mesh.</p> </div> <!-- Configurators --> <div class="space-y-8 pt-10 border-t border-slate-100"> <div class="space-y-4"> <h4 class="text-xs font-black text-slate-900 uppercase tracking-widest">Spectral Variant</h4> <div class="flex gap-4"> <button class="h-12 w-12 rounded-2xl bg-slate-900 ring-4 ring-slate-100 ring-offset-2 ring-offset-white"></button> <button class="h-12 w-12 rounded-2xl bg-indigo-600 hover:ring-4 hover:ring-indigo-100 hover:ring-offset-2 transition-all"></button> <button class="h-12 w-12 rounded-2xl bg-slate-200 hover:ring-4 hover:ring-slate-100 hover:ring-offset-2 transition-all"></button> </div> </div> <div class="space-y-4"> <h4 class="text-xs font-black text-slate-900 uppercase tracking-widest leading-none">Cluster Capacity</h4> <div class="flex flex-wrap gap-3"> <button class="px-6 py-3 bg-white border-2 border-slate-100 rounded-xl text-xs font-bold text-slate-900 hover:border-indigo-600 transition-all cursor-pointer">12 Nodes</button> <button class="px-6 py-3 bg-indigo-600 border-2 border-indigo-600 rounded-xl text-xs font-bold text-white shadow-xl shadow-indigo-100 cursor-pointer">24 Nodes</button> <button class="px-6 py-3 bg-white border-2 border-slate-100 rounded-xl text-xs font-bold text-slate-900 hover:border-indigo-600 transition-all cursor-pointer">48 Nodes</button> <button class="px-6 py-3 bg-white border-2 border-slate-100 rounded-xl text-xs font-bold text-slate-400 cursor-not-allowed line-through">96 Nodes</button> </div> </div> </div> <!-- Actions --> <div class="flex flex-col sm:flex-row gap-4 pt-10"> <button class="flex-1 py-5 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-2xl shadow-slate-200/50 cursor-pointer">Initialize Sync Session</button> <button class="px-8 py-5 border-2 border-slate-100 rounded-2xl text-slate-400 hover:text-rose-500 hover:border-rose-100 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="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> </div> </div> </body> </html>
