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 Activity Feed</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-xl w-full bg-white p-12 rounded-[3.5rem] border border-slate-100 shadow-xl shadow-slate-200/50"> <div class="flex items-center justify-between mb-12"> <h4 class="text-xl font-bold text-slate-900 tracking-tight">Spectral Activity</h4> <button class="text-xs font-black text-indigo-600 uppercase tracking-widest hover:underline cursor-pointer">Live Feed</button> </div> <div class="space-y-10 relative"> <!-- Timeline Line --> <div class="absolute top-2 bottom-0 left-[1.125rem] w-px bg-slate-100"></div> <!-- Event 1 --> <div class="relative flex gap-6 group"> <div class="h-9 w-9 bg-emerald-50 text-emerald-600 rounded-xl flex items-center justify-center shrink-0 border border-emerald-100 group-hover:bg-emerald-600 group-hover:text-white transition-all shadow-sm z-10"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> </div> <div class="space-y-1"> <p class="text-sm font-bold text-slate-800">Manifest Synchronized</p> <p class="text-xs text-slate-500 leading-relaxed">Core sync established across all 12 regional clusters for manifest #8402-A.</p> <div class="flex items-center gap-2 pt-2"> <div class="h-5 w-5 rounded-full overflow-hidden border border-slate-100"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop" class="h-full w-full object-cover"> </div> <span class="text-[10px] font-bold text-slate-400">Verified by Alexander S.</span> <span class="text-[10px] text-slate-300">•</span> <span class="text-[10px] text-slate-300">12 min ago</span> </div> </div> </div> <!-- Event 2 --> <div class="relative flex gap-6 group"> <div class="h-9 w-9 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center shrink-0 border border-indigo-100 group-hover:bg-indigo-600 group-hover:text-white transition-all shadow-sm z-10"> <svg class="h-4 w-4" 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-4v10" /></svg> </div> <div class="space-y-1"> <p class="text-sm font-bold text-slate-800">Parameter Calibration</p> <p class="text-xs text-slate-500 leading-relaxed">System adjusted kinetic handshake delay from 0.5ms to 0.42ms for optimal throughput.</p> <div class="flex items-center gap-2 pt-2"> <span class="text-[10px] font-bold text-indigo-500 uppercase tracking-widest bg-indigo-50 px-2 py-0.5 rounded">Automated Protocol</span> <span class="text-[10px] text-slate-300">•</span> <span class="text-[10px] text-slate-300">45 min ago</span> </div> </div> </div> <!-- Event 3 --> <div class="relative flex gap-6 group"> <div class="h-9 w-9 bg-amber-50 text-amber-600 rounded-xl flex items-center justify-center shrink-0 border border-amber-100 group-hover:bg-amber-600 group-hover:text-white transition-all shadow-sm z-10"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg> </div> <div class="space-y-1"> <p class="text-sm font-bold text-slate-800">Sub-Sector Alert</p> <p class="text-xs text-slate-500 leading-relaxed">Legacy Hub in Sector 09 reported periodic packet fragmentation during pulse sync.</p> <div class="flex items-center gap-2 pt-2"> <button class="text-[10px] font-bold text-rose-500 hover:rose-600 transition-colors uppercase tracking-widest cursor-pointer">Investigate Log</button> <span class="text-[10px] text-slate-300">•</span> <span class="text-[10px] text-slate-300">2h ago</span> </div> </div> </div> <!-- Event 4 --> <div class="relative flex gap-6 group"> <div class="h-9 w-9 bg-slate-50 text-slate-400 rounded-xl flex items-center justify-center shrink-0 border border-slate-100 group-hover:bg-slate-900 group-hover:text-white transition-all shadow-sm z-10"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" /></svg> </div> <div class="space-y-1"> <p class="text-sm font-bold text-slate-800">New Sector Architect</p> <p class="text-xs text-slate-500 leading-relaxed">Access granted to Jessica Miller for Sector 04 Core Logic management.</p> <div class="flex items-center gap-2 pt-2"> <div class="h-5 w-5 rounded-full overflow-hidden border border-slate-100"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=64&h=64&fit=crop" class="h-full w-full object-cover"> </div> <span class="text-[10px] font-bold text-slate-400">Jessica Miller joined</span> <span class="text-[10px] text-slate-300">•</span> <span class="text-[10px] text-slate-300">4h ago</span> </div> </div> </div> </div> <div class="mt-12 pt-8 border-t border-slate-50"> <button class="w-full py-4 bg-slate-50 text-slate-900 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-900 hover:text-white transition-all cursor-pointer">Archive All Events</button> </div> </div> </body> </html>
