Composant de navigation du fil d’Ariane
Un composant de navigation réactif conçu dans le style Neumorphism, prenant en charge le mode sombre, créé à l’aide de Tailwind CSS.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mx-4">
<ol class="list-reset flex items-center space-x-2">
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Home
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" 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="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Category
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" 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="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<span class="text-gray-400 dark:text-gray-600">
Sub-category
</span>
</li>
</ol>
</nav>
<style>
/* Neumorphism Styling */
.bg-white {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
}
.dark .bg-gray-800 {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.7);
}
a {
transition: all 0.3s ease;
}
</style>Composants associés
RetroRealEstateFil d’Ariane
Un composant de navigation simple et réactif dans un style rétro/vintage aux couleurs d’automne, adapté aux annonces immobilières, y compris la prise en charge du 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.
Composant de navigation du fil d’Ariane
Un composant de navigation Breadcrumb réactif utilisant le style de conception Neumorphism avec une palette de couleurs pastel et la prise en charge du thème sombre, construit à l’aide de Tailwind CSS.