Componente de navegación skeuomórfica
Un componente de navegación diseñado en un estilo skeuomórfico, con colores vibrantes y un diseño responsivo adecuado para el contenido del blog. Incluye funciones interactivas como efectos de desplazamiento y está optimizado para el modo oscuro.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex items-center mb-4 md:mb-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
</div>
<ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
</li>
<li class="mb-2 md:mb-0">
<a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</li>
</ul>
</nav>
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
</div>
</div>
</div>Componentes relacionados
Componente de navegación
Un componente de navegación responsivo diseñado para el modo oscuro con Tailwind CSS.
Componente de navegación retro
Un componente de navegación de estilo retro con estética vintage de los años 80/90, con un diseño responsivo y soporte de temas oscuros con Tailwind CSS.
3D_Vibrant_Simple_Job_Career_Navigation
Un componente de navegación simple, vibrante y receptivo con sutiles efectos 3D, diseñado para bolsas de trabajo y plataformas de desarrollo profesional. Incluye soporte para modo oscuro.