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 Dashboard Tabs</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex items-center justify-center min-h-screen p-6 antialiased" x-data="{ activeTab: 1 }"> <div class="w-full max-w-4xl bg-white p-6 rounded-[2.5rem] shadow-3xl border border-slate-100"> <div class="flex flex-col sm:flex-row items-center justify-between gap-6 mb-8 px-4"> <div> <h2 class="text-xl font-black text-slate-900 tracking-tight italic">Resource Hub</h2> <p class="text-xs text-slate-400 font-bold uppercase tracking-widest mt-1">Manage Peripheral Segments</p> </div> <!-- Tab Strip (Dashboard Style) --> <div class="flex items-center gap-1 p-1 bg-slate-50 border border-slate-100 rounded-2xl"> <button @click="activeTab = 1" class="px-6 py-2.5 text-[10px] font-black uppercase tracking-widest transition-all cursor-pointer rounded-xl italic" :class="activeTab === 1 ? 'bg-white text-indigo-600 shadow-sm border border-slate-200' : 'text-slate-400 hover:text-slate-600'" > Compute </button> <button @click="activeTab = 2" class="px-6 py-2.5 text-[10px] font-black uppercase tracking-widest transition-all cursor-pointer rounded-xl italic" :class="activeTab === 2 ? 'bg-white text-indigo-600 shadow-sm border border-slate-200' : 'text-slate-400 hover:text-slate-600'" > Storage </button> <button @click="activeTab = 3" class="px-6 py-2.5 text-[10px] font-black uppercase tracking-widest transition-all cursor-pointer rounded-xl italic" :class="activeTab === 3 ? 'bg-white text-indigo-600 shadow-sm border border-slate-200' : 'text-slate-400 hover:text-slate-600'" > Edge Hub </button> </div> </div> <!-- Grid Layout in Content --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="p-6 bg-slate-50 rounded-3xl border border-slate-100/50 hover:border-indigo-100 transition-colors"> <div class="h-10 w-10 bg-white shadow-sm rounded-xl flex items-center justify-center mb-6"> <svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> </div> <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Cluster A1</p> <h4 class="text-lg font-black text-slate-900 tracking-tighter mb-4">Neural Prime</h4> <div class="h-1.5 bg-white rounded-full overflow-hidden"> <div class="h-full bg-indigo-500 w-3/4"></div> </div> </div> <div class="p-6 bg-slate-50 rounded-3xl border border-slate-100/50 hover:border-indigo-100 transition-colors"> <div class="h-10 w-10 bg-white shadow-sm rounded-xl flex items-center justify-center mb-6"> <svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 19V5l12 7-12 7z" /></svg> </div> <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Cluster B4</p> <h4 class="text-lg font-black text-slate-900 tracking-tighter mb-4">Pulse Mesh</h4> <div class="h-1.5 bg-white rounded-full overflow-hidden"> <div class="h-full bg-emerald-500 w-1/2"></div> </div> </div> <div class="p-6 bg-slate-50 rounded-3xl border border-slate-100/50 hover:border-indigo-100 transition-colors"> <div class="h-10 w-10 bg-white shadow-sm rounded-xl flex items-center justify-center mb-6"> <svg class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" /></svg> </div> <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Storage</p> <h4 class="text-lg font-black text-slate-900 tracking-tighter mb-4">Core Vault</h4> <div class="h-1.5 bg-white rounded-full overflow-hidden"> <div class="h-full bg-indigo-500 w-1/4"></div> </div> </div> </div> </div> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> </body> </html>
