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 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 ruta de navegación
Componente de navegación de migas de pan con diseño retro / vintage, combinación de colores vibrantes y nivel de complejidad simple, para fines de blog / contenido.