Componentes Encabezado Componente de encabezado

Componente de encabezado

Un componente de encabezado receptivo con diseño de Glassmorphism con elementos translúcidos similares al vidrio esmerilado y soporte para temas oscuros.

Vista previa

Código HTML

<header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
    </nav>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
    </div>
</header>

Componentes relacionados

Componente de encabezado Retro Vintage

Un componente de encabezado receptivo con un estilo de diseño retro / vintage, con soporte para el modo oscuro y una estética nostálgica inspirada en los años 80 y 90.

Abrir

DarkTriadicSimpleBusinessHeader

Componente de encabezado responsivo con soporte de modo oscuro para sitios web comerciales

Abrir

Componente de encabezado

Componente de encabezado de viento de cola con diseño 3D, combinación de colores pastel, complejidad compleja, propósito del tablero, diseño receptivo y compatibilidad con temas oscuros

Abrir