Componentes Encabezado Componente de encabezado skeuomórfico

Componente de encabezado skeuomórfico

Un componente de encabezado simple y receptivo diseñado para sitios web de comercio electrónico con un estilo esqueuomórfico, que utiliza un esquema de color en escala de grises y admite el modo oscuro.

Vista previa

Código HTML

<header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
        </div>
        <nav class="flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
            <span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
        </div>
    </div>
</header>

Componentes relacionados

RetroHeaderComponent

Componente de encabezado retro / vintage con efectos receptivos y soporte para temas oscuros.

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

Cabecera de Redes Sociales

Un componente de encabezado receptivo para interfaces de redes sociales, diseñado con una interfaz de usuario de modo oscuro que utiliza un esquema de color triádico y elementos mínimos. Incluye un título del sitio, una barra de búsqueda y un enlace al perfil de usuario, con estilos adaptados para el modo oscuro utilizando Tailwind CSS.

Abrir