Componente di navigazione breadcrumb
Un componente di navigazione Breadcrumb reattivo che utilizza lo stile di progettazione Neumorphism con una combinazione di colori pastello e supporto per temi scuri, creato utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb CSS Tailwind con supporto per la modalità scura.
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb reattivo progettato nello stile Neumorphism, che supporta la modalità oscura, creato utilizzando Tailwind CSS.