Composant de navigation du fil d’Ariane
Composant de navigation réactif avec Material Design et Tailwind CSS, avec prise en charge du thème sombre et une palette de couleurs triadique.
HTML Code
<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>Composants associés
Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation
Un composant de navigation simple et réactif avec une esthétique rétro/vintage, utilisant des tons bleus d’entreprise, conçu pour les plateformes éducatives. Inclut la prise en charge du mode sombre.
Paper_Jewel_Tone_Breadcrumb_Navigation
Un composant de navigation complexe, inspiré du papier/de l’imprimé, aux tons de bijoux, adapté aux sites de conseil/services. Il comporte des éléments riches et interactifs et prend en charge une réactivité totale et le mode sombre.
Navigation brutaliste
Un composant de navigation d’inspiration brutaliste pour les systèmes de réservation, avec un contraste élevé, en noir et blanc avec une couleur d’accent vive, et une réactivité totale avec la prise en charge du mode sombre. Chaque étape est clairement délimitée par une typographie audacieuse et un séparateur unique.