Componente de navegación de ruta de navegación
Componente de navegación de migas de pan responsivo con diseño de materiales y CSS de viento de cola, con soporte para temas oscuros y un esquema de color triádico.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-md rounded p-4 mb-6">
<ol class="list-reset flex text-gray-600 dark:text-gray-300 text-sm font-semibold">
<li>
<a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Home</a>
<span class="mx-2">/</span>
</li>
<li>
<a href="#" class="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Blog</a>
<span class="mx-2">/</span>
</li>
<li class="text-gray-500 dark:text-gray-400">Post Title</li>
</ol>
</nav>
<section class="bg-white dark:bg-gray-800 p-5 rounded shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
Post Title
</h2>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<p class="text-gray-600 dark:text-gray-300 text-sm">
Written by <span class="font-semibold">Author Name</span> on <span class="font-semibold">June 1, 2023</span>
</p>
</div>
<img src="https://picsum.photos/800/400" alt="Blog Post Image" class="w-full rounded mb-4 shadow">
<p class="text-gray-700 dark:text-gray-300 mb-4">
Welcome to the blog post content. This is where you can include your text...
</p>
</section>Componentes relacionados
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado con estilo Neumorphism usando Tailwind CSS, con soporte para tema oscuro.
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 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.