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 Shopping Cart UI</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-end min-h-screen antialiased"> <div class="max-w-md w-full bg-white h-screen shadow-4xl flex flex-col border-l border-slate-100"> <!-- Header --> <div class="p-8 border-b border-slate-50 flex items-center justify-between"> <div> <h2 class="text-2xl font-black text-slate-900 tracking-tight">Active Manifest</h2> <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] mt-1">Synchronization Queue</p> </div> <button class="h-10 w-10 flex items-center justify-center text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-xl 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="M6 18L18 6M6 6l12 12" /></svg> </button> </div> <!-- Cart Items --> <div class="flex-1 overflow-y-auto p-8 space-y-8"> <!-- Item 1 --> <div class="flex gap-6 group"> <div class="h-24 w-24 bg-slate-50 rounded-2xl overflow-hidden border border-slate-100 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 flex flex-col justify-between py-1"> <div class="flex justify-between items-start"> <div> <h4 class="font-bold text-slate-900 leading-tight">Core Alpha Sync Module</h4> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Sector 01 Alpha</p> </div> <p class="font-black text-slate-900">$299</p> </div> <div class="flex items-center justify-between"> <div class="bg-slate-50 rounded-lg p-1 flex items-center gap-3 border border-slate-100"> <button class="h-6 w-6 flex items-center justify-center text-slate-400 hover:text-indigo-600 transition-colors cursor-pointer"> <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20 12H4" /></svg> </button> <span class="text-xs font-black text-slate-900">01</span> <button class="h-6 w-6 flex items-center justify-center text-slate-400 hover:text-indigo-600 transition-colors cursor-pointer"> <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" /></svg> </button> </div> <button class="text-[10px] font-black text-rose-500 uppercase tracking-widest hover:underline cursor-pointer">Remove</button> </div> </div> </div> <!-- Item 2 --> <div class="flex gap-6 group"> <div class="h-24 w-24 bg-slate-50 rounded-2xl overflow-hidden border border-slate-100 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 flex flex-col justify-between py-1"> <div class="flex justify-between items-start"> <div> <h4 class="font-bold text-slate-900 leading-tight">Kinetic Sync Bridge</h4> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">Global Mesh</p> </div> <p class="font-black text-slate-900">$549</p> </div> <div class="flex items-center justify-between"> <div class="bg-slate-50 rounded-lg p-1 flex items-center gap-3 border border-slate-100"> <button class="h-6 w-6 flex items-center justify-center text-slate-400 hover:text-indigo-600 transition-colors cursor-pointer"> <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M20 12H4" /></svg> </button> <span class="text-xs font-black text-slate-900">01</span> <button class="h-6 w-6 flex items-center justify-center text-slate-400 hover:text-indigo-600 transition-colors cursor-pointer"> <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" /></svg> </button> </div> <button class="text-[10px] font-black text-rose-500 uppercase tracking-widest hover:underline cursor-pointer">Remove</button> </div> </div> </div> </div> <!-- Footer --> <div class="p-8 border-t border-slate-50 space-y-6"> <div class="space-y-3"> <div class="flex justify-between text-sm font-bold text-slate-400"> <span>Subtotal Manifest</span> <span class="text-slate-900">$848.00</span> </div> <div class="flex justify-between text-sm font-bold text-slate-400"> <span>Sovereign Fee</span> <span class="text-slate-900">$20.00</span> </div> <div class="pt-3 border-t border-slate-50 flex justify-between"> <span class="text-xl font-black text-slate-900 tracking-tight">Total Sync Cost</span> <span class="text-xl font-black text-indigo-600 tracking-tight">$868.00</span> </div> </div> <button class="w-full 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-100 cursor-pointer">Begin Authorization</button> <p class="text-[9px] text-center text-slate-400 font-bold uppercase tracking-widest">Manifest IDs are valid for 24 cycles.</p> </div> </div> </body> </html>
