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
Componente de navegación de migas de pan con diseño de skeuomorfismo, efectos responsivos y compatibilidad con temas oscuros.
Componente de navegación de ruta de navegación
Un componente de navegación de ruta de navegación receptivo que usa Tailwind CSS con un estilo de diseño de glassmorphism. Cuenta con un fondo borroso similar al vidrio, admite temas oscuros e incluye imágenes de marcador de posición.
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan inspirado en Material Design para paneles, que utiliza un esquema de color en escala de grises e interacciones complejas, implementado con Tailwind CSS para brindar capacidad de respuesta y compatibilidad con temas oscuros.