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 Chevron Breadcrumb</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-indigo-50 flex items-center justify-center h-screen px-4"> <nav class="flex overflow-hidden border border-indigo-100 rounded-2xl bg-white shadow-xl max-w-2xl w-full" aria-label="Breadcrumb"> <ol class="inline-flex items-stretch w-full"> <li class="relative flex-1 group"> <a href="##" class="flex items-center justify-center h-14 pl-6 pr-8 text-xs font-black uppercase tracking-widest text-slate-800 bg-indigo-50/30 hover:bg-indigo-600 hover:text-white transition-all"> Home </a> <div class="absolute top-0 -right-4 h-full w-4 flex items-center z-10"> <svg class="h-full w-4 text-indigo-50/30 group-hover:text-indigo-600 transition-colors" viewBox="0 0 16 64" fill="currentColor" preserveAspectRatio="none"><path d="M0 0l16 32L0 64V0z"/></svg> </div> </li> <li class="relative flex-1 group"> <a href="##" class="flex items-center justify-center h-14 pl-10 pr-8 text-xs font-black uppercase tracking-widest text-slate-500 hover:bg-indigo-500 hover:text-white transition-all"> Projects </a> <div class="absolute top-0 -right-4 h-full w-4 flex items-center z-10"> <svg class="h-full w-4 text-white group-hover:text-indigo-500 transition-colors" viewBox="0 0 16 64" fill="currentColor" preserveAspectRatio="none"><path d="M0 0l16 32L0 64V0z"/></svg> </div> </li> <li class="relative flex-1"> <span class="flex items-center justify-center h-14 pl-10 pr-6 text-xs font-black uppercase tracking-widest text-indigo-600"> Current </span> </li> </ol> </nav> </body> </html>
