Componente di navigazione breadcrumb
Componente di navigazione breadcrumb reattivo con design dei materiali e CSS Tailwind, con supporto per temi scuri e una combinazione di colori triadica.
Codice HTML
<nav class="bg-white dark:bg-gray-800 shadow-md rounded p-4 mb-6">
<ol class="list-reset flex text-gray-600 dark:text-gray-300 text-sm font-semibold">
<li>
<a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Home</a>
<span class="mx-2">/</span>
</li>
<li>
<a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Blog</a>
<span class="mx-2">/</span>
</li>
<li class="text-gray-500 dark:text-gray-400">Post Title</li>
</ol>
</nav>
<section class="bg-white dark:bg-gray-800 p-5 rounded shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
Post Title
</h2>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<p class="text-gray-600 dark:text-gray-300 text-sm">
Written by <span class="font-semibold">Author Name</span> on <span class="font-semibold">June 1, 2023</span>
</p>
</div>
<img src="https://picsum.photos/800/400" alt="Blog Post Image" class="w-full rounded mb-4 shadow">
<p class="text-gray-700 dark:text-gray-300 mb-4">
Welcome to the blog post content. This is where you can include your text...
</p>
</section>Componenti correlati
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.
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb ispirato al Material Design per le dashboard, che utilizza una combinazione di colori in scala di grigi e interazioni complesse, implementato con Tailwind CSS per la reattività e il supporto del tema scuro.