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.
Codice HTML
<nav class="bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
<ol class="list-reset flex text-sm text-white">
<li class="mr-2">
<a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
Home
</a>
<span class="text-gray-600 dark:text-gray-400">/</span>
</li>
<li class="mr-2">
<a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
Dashboard
</a>
<span class="text-gray-600 dark:text-gray-400">/</span>
</li>
<li class="mr-2">
<a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
Analytics
</a>
<span class="text-gray-600 dark:text-gray-400">/</span>
</li>
<li class="text-gray-600 dark:text-gray-400">Current Page</li>
</ol>
</nav>
<div class="p-4 bg-gray-700 rounded-lg dark:bg-gray-800 mt-4">
<h2 class="text-xl text-white font-bold">
Breadcrumb Navigation in Brutalism Style
</h2>
<p class="text-gray-400 dark:text-gray-300">
Use the breadcrumbs above to navigate through the dashboard.
</p>
<div class="mt-4">
<img class="w-full h-40 object-cover rounded" src="https://picsum.photos/800/200" alt="Dashboard Image">
</div>
<div class="mt-4">
<h3 class="text-lg text-white">Team Members</h3>
<div class="flex space-x-4 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
</div>
</div>Componenti correlati
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 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 che utilizza lo stile di progettazione Neumorphism con una combinazione di colori pastello e supporto per temi scuri, creato utilizzando Tailwind CSS.