Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo que utiliza el estilo de diseño Neumorphism con un esquema de color pastel y soporte para temas oscuros, creado con Tailwind CSS.
Código HTML
<nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
<ol class="list-reset flex">
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" 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="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" 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="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" 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="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
</li>
</ol>
</nav>
<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</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 un estilo brutalista con una combinación de colores vibrantes para los tableros, con soporte para modo oscuro.
Componente de navegación de migas de pan brutalistas
Componente de navegación de migas de pan brutalista para carteras con combinación de colores vibrantes y diseño complejo, con diseño receptivo y compatibilidad con modo oscuro.
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado con estilo Glassmorphism y colores de tono tierra, perfecto para sitios web de empresas profesionales. Es compatible con el tema oscuro e incluye funciones interactivas para la navegación.