Componentes Encabezado Componente de encabezado 3D

Componente de encabezado 3D

Un componente de encabezado complejo e interactivo diseñado para interfaces de redes sociales que utilizan un estilo 3D con colores en escala de grises. Incluye un logotipo, una barra de búsqueda, avatares de usuario y botones de acción, con comportamiento responsivo y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<header class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 flex items-center justify-between">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
        <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">Social Media App</h1>
    </div>
    <div class="flex-grow mx-4">
        <input type="text" placeholder="Search..." class="bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-shadow duration-300 shadow-md dark:shadow-lg" />
    </div>
    <div class="flex items-center">
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg mr-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
    </div>
</header>

Componentes relacionados

Skeuomorphism Triadic Simple Portfolio Header Component

Abrir

Encabezado de negocio de diseño de materiales

Material Design inspiró un componente de encabezado simple con un esquema de color complementario para sitios web comerciales. Diseño responsivo con soporte para temas oscuros.

Abrir

Componente de encabezado de redes sociales

Un componente de encabezado complejo y responsivo de modo oscuro con un diseño minimalista y una combinación de colores complementaria, diseñado para interfaces de redes sociales.

Abrir