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 Wishlist UI</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"> <div class="max-w-5xl w-full space-y-12"> <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 px-4"> <div> <h2 class="text-3xl font-black text-slate-900 tracking-tight">Saved Manifest Components</h2> <p class="text-slate-500 mt-2">Components prioritized for future sector deployments.</p> </div> <button class="px-8 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black uppercase tracking-widest text-slate-600 hover:bg-slate-900 hover:text-white transition-all shadow-sm cursor-pointer">Export Wishlist</button> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <!-- Wishlist Item 1 --> <div class="bg-white p-8 rounded-[3rem] border border-slate-100 shadow-sm flex gap-8 group hover:border-indigo-100/50 transition-all"> <div class="h-32 w-32 bg-slate-50 rounded-[2rem] overflow-hidden border border-slate-50 shrink-0"> <img src="https://plus.unsplash.com/premium_photo-1681426687411-21986b0626a8?w=300&h=300&fit=crop" class="h-full w-full object-cover"> </div> <div class="flex-1 flex flex-col justify-between py-2"> <div class="flex justify-between items-start"> <div class="space-y-1"> <h3 class="text-lg font-bold text-slate-900 tracking-tight">Kinetic Sync Bridge</h3> <p class="text-[10px] font-black text-indigo-500 uppercase tracking-widest leading-none">Global Mesh Access</p> </div> <button class="text-slate-300 hover:text-rose-500 transition-colors cursor-pointer"> <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="M6 18L18 6M6 6l12 12" /></svg> </button> </div> <div class="flex items-center justify-between"> <p class="font-black text-slate-900">$549.00</p> <button class="px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 transition-all shadow-lg shadow-indigo-100 cursor-pointer">Move to Sync</button> </div> </div> </div> <!-- Wishlist Item 2 --> <div class="bg-white p-8 rounded-[3rem] border border-slate-100 shadow-sm flex gap-8 group hover:border-indigo-100/50 transition-all"> <div class="h-32 w-32 bg-slate-50 rounded-[2rem] overflow-hidden border border-slate-50 shrink-0"> <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?w=300&h=300&fit=crop" class="h-full w-full object-cover"> </div> <div class="flex-1 flex flex-col justify-between py-2"> <div class="flex justify-between items-start"> <div class="space-y-1"> <h3 class="text-lg font-bold text-slate-900 tracking-tight">Spectral Proxy XI</h3> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none">Security Core Tier</p> </div> <button class="text-slate-300 hover:text-rose-500 transition-colors cursor-pointer"> <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="M6 18L18 6M6 6l12 12" /></svg> </button> </div> <div class="flex items-center justify-between"> <p class="font-black text-slate-900">$820.00</p> <button class="px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 transition-all shadow-lg shadow-indigo-100 cursor-pointer">Move to Sync</button> </div> </div> </div> <!-- Wishlist Item 3 --> <div class="bg-white p-8 rounded-[3rem] border border-slate-100 shadow-sm flex gap-8 group hover:border-indigo-100/50 transition-all opacity-60"> <div class="h-32 w-32 bg-slate-50 rounded-[2rem] overflow-hidden border border-slate-50 shrink-0 grayscale"> <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=300&h=300&fit=crop" class="h-full w-full object-cover"> </div> <div class="flex-1 flex flex-col justify-between py-2"> <div class="flex justify-between items-start"> <div class="space-y-1"> <h3 class="text-lg font-bold text-slate-900 tracking-tight">Vanguard Logic Seal</h3> <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-none">Legacy Manifest</p> </div> <button class="text-slate-300 hover:text-rose-500 transition-colors cursor-pointer"> <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="M6 18L18 6M6 6l12 12" /></svg> </button> </div> <div class="flex items-center justify-between"> <p class="font-black text-slate-400">$125.00</p> <button class="px-5 py-2.5 bg-slate-100 text-slate-400 rounded-xl text-[10px] font-black uppercase tracking-widest cursor-not-allowed">Restocking Hub</button> </div> </div> </div> </div> <div class="text-center pt-8"> <button class="px-10 py-4 bg-slate-900 text-white rounded-[2rem] text-[11px] font-black uppercase tracking-[0.2em] hover:bg-indigo-600 transition-all shadow-2xl shadow-indigo-100 cursor-pointer">Move All to Active Sync</button> </div> </div> </body> </html>
