Breadcrumb Navigation Component

<nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
  <ol class="list-reset flex">
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
    </li>
  </ol>
</nav>

<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
  <p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
    <span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
  </div>
</div>