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 Checkout Page</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 grid grid-cols-1 lg:grid-cols-12 gap-16 items-start"> <!-- Checkout Form (Left) --> <div class="lg:col-span-7 space-y-12"> <div class="space-y-4"> <h2 class="text-3xl font-black text-slate-900 tracking-tight">Authorization</h2> <p class="text-slate-500 font-medium">Verify your regional sector and synchronization credentials.</p> </div> <!-- Section 1: Identity --> <div class="space-y-8"> <div class="flex items-center gap-4"> <span class="h-8 w-8 bg-slate-900 text-white rounded-xl flex items-center justify-center text-xs font-black">01</span> <h3 class="text-xl font-bold text-slate-900 tracking-tight">Lead Architect Info</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Full Name</label> <input type="text" placeholder="Alexander Sterling" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Email Hash</label> <input type="email" placeholder="a.sterling@vanguard-sync.com" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> </div> </div> <!-- Section 2: Regional Sector --> <div class="space-y-8"> <div class="flex items-center gap-4"> <span class="h-8 w-8 bg-slate-900 text-white rounded-xl flex items-center justify-center text-xs font-black">02</span> <h3 class="text-xl font-bold text-slate-900 tracking-tight">Sector Deployment</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="md:col-span-2 space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Primary Hub Location</label> <input type="text" placeholder="Sector 01 Alpha - US East" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">City Node</label> <input type="text" placeholder="New York" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Mesh Grid ZIP</label> <input type="text" placeholder="10001" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> </div> </div> <!-- Section 3: Payment Authority --> <div class="space-y-8"> <div class="flex items-center gap-4"> <span class="h-8 w-8 bg-slate-900 text-white rounded-xl flex items-center justify-center text-xs font-black">03</span> <h3 class="text-xl font-bold text-slate-900 tracking-tight">Payment Authority</h3> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="md:col-span-2 space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Manifest Card Number</label> <div class="relative"> <input type="text" placeholder="0000 0000 0000 0000" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> <svg class="absolute right-4 top-1/2 -translate-y-1/2 h-6 w-6 text-slate-200" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg> </div> </div> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Expiration</label> <input type="text" placeholder="MM/YY" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> <div class="space-y-2"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-2">Seal CVC</label> <input type="text" placeholder="123" class="w-full px-6 py-4 bg-white border border-slate-100 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all font-medium"> </div> </div> </div> <button class="w-full py-5 bg-slate-900 text-white rounded-[2rem] text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-2xl shadow-indigo-100 cursor-pointer">Confirm Synchronization</button> </div> <!-- Summary Sticky (Right) --> <div class="lg:col-span-5 hidden lg:block sticky top-32"> <div class="bg-white p-10 rounded-[3.5rem] border border-slate-100 shadow-xl shadow-slate-200/50 space-y-8"> <h3 class="text-xl font-bold text-slate-900 tracking-tight">Sync Summary</h3> <div class="space-y-6"> <div class="flex gap-4"> <div class="h-16 w-16 bg-slate-50 rounded-xl overflow-hidden border border-slate-50 shrink-0"> <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="flex-1"> <h5 class="text-sm font-bold text-slate-900">Core Alpha Sync Module</h5> <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Qty: 01</p> <p class="text-sm font-black text-indigo-600 mt-1">$299.00</p> </div> </div> <div class="flex gap-4"> <div class="h-16 w-16 bg-slate-50 rounded-xl overflow-hidden border border-slate-50 shrink-0"> <img src="https://plus.unsplash.com/premium_photo-1681426687411-21986b0626a8?w=200&h=200&fit=crop" class="h-full w-full object-cover"> </div> <div class="flex-1"> <h5 class="text-sm font-bold text-slate-900">Kinetic Sync Bridge</h5> <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Qty: 01</p> <p class="text-sm font-black text-indigo-600 mt-1">$549.00</p> </div> </div> </div> <div class="space-y-4 pt-8 border-t border-slate-50"> <div class="flex justify-between text-sm font-bold text-slate-400"> <span>Subtotal</span> <span class="text-slate-900">$848.00</span> </div> <div class="flex justify-between text-sm font-bold text-slate-400"> <span>Sync Protocol Fee</span> <span class="text-slate-900">$20.00</span> </div> <div class="flex justify-between pt-4 border-t border-slate-50"> <span class="text-lg font-black text-slate-900 tracking-tight leading-none">Total Manifest Cost</span> <span class="text-lg font-black text-indigo-600 tracking-tight leading-none">$868.00</span> </div> </div> </div> </div> </div> </body> </html>
