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 Minimalist Dot Breadcrumb</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-white flex items-center justify-center h-screen px-4"> <nav class="flex px-10 py-4 items-center space-x-4 border-b-2 border-slate-50 relative group" aria-label="Breadcrumb"> <ol class="inline-flex items-center space-x-6"> <li class="inline-flex items-center"> <a href="##" class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 hover:text-slate-900 transition-all decoration-slate-200 decoration-4 underline-offset-8 group-hover:underline">Home</a> </li> <li class="flex items-center"> <div class="h-1.5 w-1.5 rounded-full bg-slate-200 group-hover:bg-slate-900 transition-colors"></div> <a href="##" class="ml-6 text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 hover:text-slate-900 transition-all">Projects</a> </li> <li aria-current="page" class="flex items-center"> <div class="h-1.5 w-1.5 rounded-full bg-rose-500 animate-bounce"></div> <span class="ml-6 text-[10px] font-black uppercase tracking-[0.4em] text-slate-900">Current</span> </li> </ol> </nav> </body> </html>
