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 Filters Sidebar</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-7xl w-full grid grid-cols-1 lg:grid-cols-4 gap-12 items-start"> <!-- Sidebar Filters --> <aside class="space-y-12 h-fit bg-white p-10 rounded-[3rem] border border-slate-100 shadow-sm"> <div class="flex items-center justify-between"> <h3 class="text-xl font-black text-slate-900 tracking-tight">Filters</h3> <button class="text-[10px] font-black text-indigo-600 uppercase tracking-widest hover:underline cursor-pointer">Reset All</button> </div> <!-- Categories --> <div class="space-y-4"> <h4 class="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Sector Categories</h4> <div class="space-y-3"> <label class="flex items-center gap-3 group cursor-pointer"> <input type="checkbox" class="h-5 w-5 bg-slate-50 border border-slate-200 rounded-lg checked:bg-indigo-600 checked:border-indigo-600 transition-all cursor-pointer"> <span class="text-sm font-bold text-slate-600 group-hover:text-slate-900">Neural Sync Units</span> </label> <label class="flex items-center gap-3 group cursor-pointer"> <input type="checkbox" class="h-5 w-5 bg-slate-50 border border-slate-200 rounded-lg checked:bg-indigo-600 checked:border-indigo-600 transition-all cursor-pointer" checked> <span class="text-sm font-bold text-slate-900">Mesh Hub Bridges</span> </label> <label class="flex items-center gap-3 group cursor-pointer"> <input type="checkbox" class="h-5 w-5 bg-slate-50 border border-slate-200 rounded-lg checked:bg-indigo-600 checked:border-indigo-600 transition-all cursor-pointer"> <span class="text-sm font-bold text-slate-600 group-hover:text-slate-900">Spectral Proxies</span> </label> <label class="flex items-center gap-3 group cursor-pointer"> <input type="checkbox" class="h-5 w-5 bg-slate-50 border border-slate-200 rounded-lg checked:bg-indigo-600 checked:border-indigo-600 transition-all cursor-pointer"> <span class="text-sm font-bold text-slate-600 group-hover:text-slate-900">Security Manifests</span> </label> </div> </div> <!-- Price Range --> <div class="space-y-4"> <h4 class="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Authorization Cost</h4> <div class="space-y-6"> <input type="range" class="w-full h-1.5 bg-slate-100 rounded-full appearance-none cursor-pointer accent-indigo-600"> <div class="flex justify-between items-center bg-slate-50 p-3 rounded-xl border border-slate-100"> <span class="text-xs font-bold text-slate-400">$200</span> <span class="text-xs font-bold text-slate-900">$1,500</span> </div> </div> </div> <!-- Protocol Level --> <div class="space-y-4"> <h4 class="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-none">Protocol Level</h4> <div class="flex flex-wrap gap-2"> <button class="px-4 py-2 bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-indigo-100">Tier 1</button> <button class="px-4 py-2 bg-slate-50 text-slate-400 hover:text-slate-900 hover:bg-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">Tier 2</button> <button class="px-4 py-2 bg-slate-50 text-slate-400 hover:text-slate-900 hover:bg-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">Elite Core</button> </div> </div> </aside> <!-- Result Grid --> <div class="lg:col-span-3 space-y-8"> <div class="flex items-center justify-between px-2"> <p class="text-sm font-bold text-slate-400 uppercase tracking-widest">Showing 24 Mesh Components</p> <button class="lg:hidden h-10 w-10 bg-white border border-slate-200 rounded-xl flex items-center justify-center text-slate-900"> <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg> </button> </div> <!-- Placeholder Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8"> <div class="aspect-[3/4] bg-white rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-center text-slate-200 font-black uppercase tracking-[0.2em]">Sync Unit 01</div> <div class="aspect-[3/4] bg-white rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-center text-slate-200 font-black uppercase tracking-[0.2em]">Sync Unit 02</div> <div class="aspect-[3/4] bg-white rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-center text-slate-200 font-black uppercase tracking-[0.2em]">Sync Unit 03</div> <div class="aspect-[3/4] bg-white rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-center text-slate-200 font-black uppercase tracking-[0.2em]">Sync Unit 04</div> <div class="aspect-[3/4] bg-white rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-center text-slate-200 font-black uppercase tracking-[0.2em]">Sync Unit 05</div> <div class="aspect-[3/4] bg-white rounded-[3rem] border border-slate-100 shadow-sm flex items-center justify-center text-slate-200 font-black uppercase tracking-[0.2em]">Sync Unit 06</div> </div> </div> </div> </body> </html>
