Componente di navigazione Breadcrumb brutalista
Componente di navigazione Brutalist Breadcrumb per portafogli con combinazione di colori vivaci e layout complessi, con design reattivo e supporto per la modalità oscura.
Codice HTML
<nav class="text-sm font-mono">
<ol class="list-none p-0 inline-flex">
<li class="flex items-center">
<a href="#" class="text-blue-500 dark:text-teal- गलती this looks like a typo, will fix to something like: dark:text-teal-300 hover:underline">Home</a>
<svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
</li>
<li class="flex items-center">
<a href="#" class="text-blue-500 dark:text-teal-300 hover:underline">Projects</a>
<svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
</li>
<li>
<span class="text-purple-700 dark:text-pink-400 font-bold">Current Project</span>
</li>
</ol>
</nav>Componenti correlati
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.
Componente di navigazione breadcrumb
Un componente di navigazione breadcrumb reattivo progettato in stile brutalista con una combinazione di colori vivaci per i cruscotti, con supporto per la modalità scura.
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.