Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan responsivo diseñado con un estilo plano minimalista, adecuado para blogs y consumo de contenido. Incluye elementos interactivos para facilitar la navegación y es compatible con el modo oscuro.
Código HTML
<nav class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<ol class="list-none flex space-x-4">
<li class="text-gray-700 dark:text-gray-300">
<a href="/" class="hover:text-blue-600 dark:hover:text-blue-300">Home</a>
</li>
<li class="text-gray-700 dark:text-gray-300">
<span>/</span>
</li>
<li class="text-gray-700 dark:text-gray-300">
<a href="/category" class="hover:text-blue-600 dark:hover:text-blue-300">Category</a>
</li>
<li class="text-gray-700 dark:text-gray-300">
<span>/</span>
</li>
<li class="text-gray-700 dark:text-gray-300">
<a href="/category/post" class="hover:text-blue-600 dark:hover:text-blue-300">Post Title</a>
</li>
</ol>
</nav>
<div class="mt-4 space-y-2">
<div class="flex items-center space-x-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200">Author Name</span>
</div>
<p class="text-gray-600 dark:text-gray-400">
This is a brief description meant for content consumption. It should be concise and engaging.
</p>
</div>
<div class="flex items-center mt-4">
<img class="h-32 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Blog Post Image">
</div>Componentes relacionados
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado en el estilo Neumorphism, compatible con el modo oscuro, creado con Tailwind CSS.
Componente de navegación de migas de pan de neumorfismo
Componente de navegación de migas de pan de neumorfismo para blog/contenido con soporte para modo oscuro
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado en un estilo brutalista con una combinación de colores vibrantes para los tableros, con soporte para modo oscuro.