Simple Breadcrumbs - Tailwind Component
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via Tailwind CSS, it is use Tailwind CSS to create this beautiful breadcrumbs tailwind component.
breadcrumbs
Loading component...
176 lines
<div class="py-32 min-h-screen px-2 sm:px-4 bg-gray-800 space-y-8">
<nav class="flex w-full bg-white text-gray-700 py-3 px-2 sm:px-5 rounded dark:bg-gray-800 mx-auto overflow-hidden">
<ol class="inline-flex items-center space-x-2 md:space-x-4">
<li
class="rounded-full bg-yellow-200 hover:bg-yellow-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-700 inline-flex items-center">
Home
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li
class="rounded-full bg-yellow-200 hover:bg-yellow-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 inline-flex items-center dark:text-gray-600 dark:hover:text-gray-700">
Shop
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li
class="rounded-full bg-yellow-200 hover:bg-yellow-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 inline-flex items-center dark:text-gray-600 dark:hover:text-gray-700">
Cart
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li class="rounded-full bg-yellow-400 px-2 sm:px-6 py-2 dark:bg-gray-200 dark:hover:bg-gray-50">
<div class="flex items-center">
<span
class="text-gray-700 ml-1 md:ml-2 text-xs sm:text-sm font-semibold dark:text-gray-700 dark:group-hover:text-gray-800">Checkout</span>
</div>
</li>
</ol>
</nav>
<nav class="flex w-full bg-white text-gray-700 py-3 px-2 sm:px-5 rounded dark:bg-gray-800 mx-auto overflow-hidden">
<ol class="inline-flex items-center space-x-2 md:space-x-4">
<li
class="rounded-full bg-green-200 hover:bg-green-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-700 inline-flex items-center">
Home
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li
class="rounded-full bg-green-200 hover:bg-green-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 inline-flex items-center dark:text-gray-600 dark:hover:text-gray-700">
Shop
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li
class="rounded-full bg-green-200 hover:bg-green-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 inline-flex items-center dark:text-gray-600 dark:hover:text-gray-700">
Cart
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li class="rounded-full bg-green-400 px-2 sm:px-6 py-2 dark:bg-gray-200 dark:hover:bg-gray-50">
<div class="flex items-center">
<span
class="text-gray-700 ml-1 md:ml-2 text-xs sm:text-sm font-semibold dark:text-gray-700 dark:group-hover:text-gray-800">Checkout</span>
</div>
</li>
</ol>
</nav>
<nav class="flex w-full bg-white text-gray-700 py-3 px-2 sm:px-5 rounded dark:bg-gray-800 mx-auto overflow-hidden">
<ol class="inline-flex items-center space-x-2 md:space-x-4">
<li
class="rounded-full bg-red-200 hover:bg-red-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-700 inline-flex items-center">
Home
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li
class="rounded-full bg-red-200 hover:bg-red-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 inline-flex items-center dark:text-gray-600 dark:hover:text-gray-700">
Shop
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li
class="rounded-full bg-red-200 hover:bg-red-300 dark:bg-gray-300 dark:hover:bg-gray-200 px-2 sm:px-6 py-2 group">
<div class="flex items-center">
<a href="#"
class="text-xs sm:text-sm font-medium text-gray-600 group-hover:text-gray-700 inline-flex items-center dark:text-gray-600 dark:hover:text-gray-700">
Cart
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 sm:h-4 sm:w-4 ml-2 sm:ml-4 text-gray-400 group-hover:text-gray-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</div>
</li>
<li class="rounded-full bg-red-400 px-2 sm:px-6 py-2 dark:bg-gray-200 dark:hover:bg-gray-50">
<div class="flex items-center">
<span
class="text-gray-700 ml-1 md:ml-2 text-xs sm:text-sm font-semibold dark:text-gray-700 dark:group-hover:text-gray-800">Checkout</span>
</div>
</li>
</ol>
</nav>
</div>