Docs TailwindCSS

<nav aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 text-sm text-gray-500">
    <li><a href="#" class="hover:text-gray-900 hover:underline transition-all">Home</a></li>
    <li><span class="mx-1 text-gray-300">/</span></li>
    <li><a href="#" class="hover:text-gray-900 hover:underline transition-all">Kategori</a></li>
    <li><span class="mx-1 text-gray-300">/</span></li>
    <li class="text-gray-900 font-semibold" aria-current="page">Artikel Anime Terbaru</li>
  </ol>
</nav>

<nav aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 text-sm text-gray-600 font-medium">
    <li><a href="#" class="hover:text-blue-600 transition-colors">Dashboard</a></li>
    <li>
      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </li>
    <li><a href="#" class="hover:text-blue-600 transition-colors">Sistem Manajemen</a></li>
    <li>
      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </li>
    <li class="text-blue-600" aria-current="page">Data Manning Agency</li>
  </ol>
</nav>

<nav class="inline-flex px-5 py-3 rounded-full bg-white shadow-sm border border-gray-100" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3 text-sm font-medium text-gray-700">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center hover:text-indigo-600 transition-colors">
        Beranda
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <span class="text-gray-400 mx-1">›</span>
        <a href="#" class="hover:text-indigo-600 transition-colors">Aset</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-gray-400 mx-1">›</span>
        <span class="text-indigo-600 font-bold">Project Blender 3D</span>
      </div>
    </li>
  </ol>
</nav>

<nav aria-label="Breadcrumb">
  <ol class="flex items-center space-x-3 text-sm text-gray-600">
    <li>
      <a href="#" class="flex items-center gap-1.5 hover:text-emerald-600 transition-colors">
        <!-- Ikon Home -->
        <svg class="w-4 h-4" 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"></path></svg>
        Home
      </a>
    </li>
    <li><span class="text-gray-300">/</span></li>
    <li>
      <a href="#" class="flex items-center gap-1.5 hover:text-emerald-600 transition-colors">
        <!-- Ikon Folder -->
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
        Project
      </a>
    </li>
    <li><span class="text-gray-300">/</span></li>
    <li class="flex items-center gap-1.5 text-emerald-600 font-bold" aria-current="page">
      <!-- Ikon Dokumen Code -->
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
      Logika Controller Laravel
    </li>
  </ol>
</nav>

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-2 text-sm font-semibold">
    <li><a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors border border-gray-200">Langkah 1: Profil</a></li>
    <li class="text-gray-400">→</li>
    <li><a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md hover:bg-gray-200 transition-colors border border-gray-200">Langkah 2: Verifikasi</a></li>
    <li class="text-gray-400">→</li>
    <li><span class="px-3 py-1 bg-orange-500 text-white rounded-md shadow-sm">Langkah 3: Selesai</span></li>
  </ol>
</nav>

<div class="bg-gray-900 p-4 rounded-xl shadow-lg border border-gray-800 max-w-fit">
  <nav aria-label="Breadcrumb">
    <ol class="flex items-center space-x-2 text-sm">
      <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors drop-shadow-md">Library</a></li>
      <li class="text-cyan-500/50 font-bold">»</li>
      <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition-colors drop-shadow-md">Unity 3D</a></li>
      <li class="text-cyan-500/50 font-bold">»</li>
      <li class="text-cyan-400 font-bold tracking-wider drop-shadow-[0_0_8px_rgba(34,211,238,0.5)]" aria-current="page">Environment Settings</li>
    </ol>
  </nav>
</div>