Componentes Componentes de mejora de la navegación Componentes de mejora de la navegación

Componentes de mejora de la navegación

Un componente de mejora de la navegación receptiva para un blog en estilo de modo oscuro con colores vibrantes y características de complejidad moderada.

Vista previa

Código HTML

<nav class="bg-gray-900 text-white p-4 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-bold hover:text-blue-400">My Blog</a>
            <a href="#" class="hover:text-blue-400">Home</a>
            <a href="#" class="hover:text-blue-400">About</a>
            <a href="#" class="hover:text-blue-400">Contact</a>
        </div>
        <div class="relative">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white rounded-full pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400" />
            <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" 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="M21 21l-4.35-4.35"/>
                <circle cx="10.5" cy="10.5" r="6.5"/>
            </svg>
        </div>
    </div>
</nav>

<section class="bg-gray-800 text-white p-8 mt-4">
    <h2 class="text-2xl font-bold mb-4">Latest Articles</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=1" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 1</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=2" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 2</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
        <article class="bg-gray-900 rounded-lg p-4 shadow-md transition-transform duration-200 hover:scale-105">
            <img src="https://picsum.photos/400/200?random=3" alt="article image" class="w-full rounded-lg mb-2" />
            <h3 class="text-lg font-semibold">Article Title 3</h3>
            <p class="text-gray-400">Short description of the article content goes here.</p>
        </article>
    </div>
</section>

<footer class="bg-gray-900 text-white p-4 mt-4">
    <div class="container mx-auto flex justify-between items-center">
        <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="user avatar" class="w-8 h-8 rounded-full" />
            <span class="text-sm">User Name</span>
        </div>
    </div>
</footer>

Componentes relacionados

Componente de mejora de la navegación

Un componente de navegación responsivo diseñado en el estilo Material Design utilizando Tailwind CSS, con soporte para temas oscuros y efectos responsivos.

Abrir

Componentes de mejora de la navegación

Un componente de navegación responsivo diseñado con conceptos de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.

Abrir

Componente Componentes de mejora de navegación

Un componente de navegación complejo de estilo brutalista para sitios web corporativos con una combinación de colores análoga, diseño receptivo y compatibilidad con el modo oscuro. Presenta diseños inusuales y alto contraste.

Abrir