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 Mobile App Layout</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-slate-900 flex justify-center items-center min-h-screen p-6 antialiased"> <!-- Mobile Device Simulation Frame --> <div class="relative w-[375px] h-[812px] bg-gray-50 rounded-[4rem] shadow-[0_64px_128px_-24px_rgba(0,0,0,0.5)] border-8 border-slate-900 overflow-hidden flex flex-col"> <!-- Status Bar Area --> <header class="h-20 bg-white/80 backdrop-blur-xl flex items-end justify-between px-10 pb-4 sticky top-0 z-30"> <span class="text-xs font-black tracking-tighter uppercase leading-none">Apex Hub</span> <div class="h-8 w-8 bg-indigo-500 rounded-xl border-2 border-slate-900"></div> </header> <!-- Scrollable App Body --> <main class="flex-1 overflow-y-auto w-full px-6 py-8 space-y-10 scrollbar-hide"> <div class="space-y-2"> <span class="text-[9px] font-bold text-indigo-600 uppercase tracking-[0.4em]">Integrated Hub</span> <h1 class="text-3xl font-black text-slate-900 tracking-tighter">Satellite Sync</h1> </div> <!-- Featured Carousel (Horizontal Scroll) --> <div class="flex gap-4 overflow-x-auto scrollbar-hide -mx-6 px-6"> <div class="w-72 h-44 bg-slate-900 rounded-[2.5rem] shrink-0 p-8 flex flex-col justify-between relative overflow-hidden group"> <div class="absolute inset-0 bg-indigo-600/20 group-hover:scale-110 transition-transform duration-700"></div> <div class="relative z-10"><span class="text-[9px] font-black text-white/40 uppercase tracking-widest">Global Mesh</span></div> <div class="relative z-10 space-y-1"> <p class="text-xl font-black text-white leading-none">US-East-Alpha</p> <p class="text-[9px] font-bold text-indigo-400">99.9% Uptime</p> </div> </div> <div class="w-72 h-44 bg-indigo-600 rounded-[2.5rem] shrink-0 p-8 flex flex-col justify-between relative overflow-hidden group"> <div class="relative z-10"><span class="text-[9px] font-black text-white/40 uppercase tracking-widest">Regional Hub</span></div> <div class="relative z-10 space-y-1"> <p class="text-xl font-black text-white leading-none">EU-West-Apex</p> <p class="text-[9px] font-bold text-indigo-200">98.4% Uptime</p> </div> </div> </div> <!-- Activity List --> <div class="space-y-6"> <h3 class="text-[10px] font-black text-slate-300 uppercase tracking-widest">Spectral Registry</h3> <div class="space-y-3"> <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4 group"> <div class="h-10 w-10 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-300 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors"><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="M13 10V3L4 14h7v7l9-11h-7z" /></svg></div> <div class="flex-1"> <p class="text-sm font-black text-slate-900">Protocol Update</p> <p class="text-[9px] font-bold text-slate-400">v4.2.1 Distributed</p> </div> <span class="text-[9px] font-black text-slate-300">2m</span> </div> <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex items-center gap-4 group"> <div class="h-10 w-10 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-300 group-hover:bg-indigo-50 group-hover:text-indigo-600 transition-colors"><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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg></div> <div class="flex-1"> <p class="text-sm font-black text-slate-900">Handshake Secure</p> <p class="text-[9px] font-bold text-slate-400">Apex Node Verification</p> </div> <span class="text-[9px] font-black text-slate-300">12m</span> </div> </div> </div> <div class="h-64 bg-slate-100 rounded-[3rem] border-2 border-dashed border-slate-200"></div> </main> <!-- Bottom Tab Bar --> <nav class="h-24 bg-white/80 backdrop-blur-xl border-t border-slate-100 flex items-center justify-around px-6 pb-2"> <div class="flex flex-col items-center gap-1.5 text-indigo-600"> <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg> <span class="text-[9px] font-black uppercase tracking-widest">Hub</span> </div> <div class="flex flex-col items-center gap-1.5 text-slate-400 hover:text-slate-900 transition-colors"> <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> <span class="text-[9px] font-black uppercase tracking-widest">Trace</span> </div> <div class="flex flex-col items-center gap-1.5 text-slate-400 hover:text-slate-900 transition-colors"> <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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" /></svg> <span class="text-[9px] font-black uppercase tracking-widest">Admin</span> </div> </nav> <!-- Gesture Indicator --> <div class="h-1.5 w-32 bg-slate-900/10 rounded-full mx-auto my-2 shrink-0"></div> </div> </body> </html>
