Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb reattivo progettato nello stile Neumorphism, che supporta la modalità oscura, creato utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente di navigazione breadcrumb
Un componente di navigazione Breadcrumb reattivo progettato con lo stile Glassmorphism e i colori del tono della terra, perfetto per i siti Web aziendali professionali. Supporta il tema scuro e include funzionalità interattive per la navigazione.
Componente di navigazione breadcrumb
Un componente di navigazione Breadcrumb reattivo progettato con lo stile Neumorphism utilizzando Tailwind CSS, con supporto per il tema scuro.
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.