Encabezado

Componente de encabezado

Un componente de encabezado simple y receptivo para redes sociales, con soporte para modo oscuro. Cuenta con un logotipo, una barra de búsqueda y un avatar de usuario. Utiliza un esquema de color en escala de grises.

Abrir vista previa

                <header class="bg-white dark:bg-gray-900 p-4 shadow-md">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo or Site Title -->
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">SocialSite</a>

    <!-- Search Bar -->
    <div class="flex-grow mx-4 max-w-xl">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
    </div>

    <!-- User Avatar/Menu -->
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    </div>
  </div>
</header>

Componente de encabezado Retro Vintage

Un componente de encabezado receptivo con un estilo Retro/Vintage adaptado para un tablero con soporte de tema oscuro.

Abrir vista previa

                <header class="bg-gradient-to-r from-purple-700 via-pink-500 to-yellow-500 dark:bg-gradient-to-r dark:from-purple-900 dark:via-pink-700 dark:to-yellow-700 p-5">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-3">
            <h1 class="text-white text-3xl font-bold">My Dashboard</h1>
        </div>
        <nav class="space-x-4">
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Home</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Reports</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Settings</a>
        </nav>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Search..." class="p-2 rounded-md bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full max-w-md">
    </div>
    <div class="mt-4 flex items-center space-x-3">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-8 w-8">
            <span class="ml-2 text-white">John Doe</span>
        </div>
        <button class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-400 transition duration-300">Logout</button>
    </div>
</header>

Componente de encabezado de comercio electrónico

Un componente de encabezado de comercio electrónico receptivo creado con Tailwind CSS con principios de Material Design. Cuenta con un esquema de color monocromático (tonos de azul), funcionalidad de búsqueda, menú de navegación, carrito de compras y perfil de usuario. El encabezado incluye efectos de profundidad como sombras y admite el modo oscuro. El componente es totalmente responsivo con un menú de hamburguesas móvil.

Abrir vista previa

                <!-- E-commerce Header with Material Design and Monochromatic Color Scheme -->
<header class="bg-blue-50 dark:bg-blue-900 shadow-md transition-colors duration-300">
  <!-- Top Bar with announcements -->
  <div class="bg-blue-600 dark:bg-blue-800 text-white py-2 px-4 text-center text-sm">
    <p>Free shipping on orders over $50 | Use code WELCOME10 for 10% off your first order</p>
  </div>

  <!-- Main Header -->
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center justify-between py-4">
      <!-- Logo -->
      <div class="flex items-center mb-4 md:mb-0">
        <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-300">
          <span class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            ShopMate
          </span>
        </a>
      </div>
      
      <!-- Mobile Menu Button -->
      <div class="md:hidden mb-4 w-full flex justify-end">
        <button class="mobile-menu-button p-2 rounded-md hover:bg-blue-100 dark:hover:bg-blue-700 transition duration-150 focus:outline-none">
          <svg class="h-6 w-6 text-blue-700 dark:text-blue-300" 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="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
      
      <!-- Search Bar -->
      <div class="w-full md:w-1/3 order-3 md:order-2 mb-4 md:mb-0">
        <div class="relative rounded-md shadow-sm">
          <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-md border border-blue-200 dark:border-blue-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-blue-800 dark:text-white transition-colors duration-300" />
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-blue-400 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
      </div>
      
      <!-- Right Menu Items -->
      <div class="flex items-center space-x-5 order-2 md:order-3">
        <!-- Theme Toggle -->
        <button class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
        
        <!-- Wishlist -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </a>
        
        <!-- Shopping Cart -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span class="absolute -top-2 -right-2 w-5 h-5 text-xs bg-blue-500 dark:bg-blue-400 text-white rounded-full flex items-center justify-center">3</span>
        </a>
        
        <!-- User Account -->
        <a href="#" class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile" class="w-8 h-8 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-sm" />
        </a>
      </div>
    </div>
    
    <!-- Navigation Menu -->
    <nav class="hidden md:block border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-wrap justify-center space-x-8">
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Women
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Men
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
    
    <!-- Mobile Navigation Menu (Hidden by default) -->
    <nav class="mobile-menu hidden md:hidden border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-col space-y-4 px-2">
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Women</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Men</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
  </div>
</header>

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.

Abrir vista previa

                <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>

Componente de encabezado

Un componente de encabezado receptivo para un tablero con microinteracciones y colores vibrantes, compatible con el tema oscuro.

Abrir vista previa

                <header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
        <h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
        <button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
    </div>
</header>

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 vista previa

                <header class="bg-white dark:bg-gray-900 text-gray-800 dark:text-white shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <h1 class="text-2xl font-bold">SocialNet</h1>
      <nav class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Feed</a>
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
        <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Notifications</a>
      </nav>
    </div>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute right-3 top-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>
      <button class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full cursor-pointer">
        <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></span>
      </div>
    </div>
  </div>
  <div class="container mx-auto px-4 py-2 md:hidden bg-gray-200 dark:bg-gray-800">
    <nav class="flex justify-around text-sm">
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Feed</a>
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      <a href="#" class="hover:text-blue-500 dark:hover:text-blue-400">Notifications</a>
    </nav>
  </div>
</header>

Componente de encabezado

Componente de encabezado con microinteracciones, combinación de colores complementaria, complejidad compleja, para fines de tablero, utilizando Tailwind CSS.

Abrir vista previa

                <header class="bg-gray-100 dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-4 py-4 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <h1 class="text-xl font-bold text-gray-800 dark:text-white">Dashboard</h1>
      <nav class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
      </nav>
    </div>

    <div class="flex items-center space-x-4">
      <button class="text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:rotate-6 focus:outline-none">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 11-6 0m6 0v2a3 3 0 11-6 0v-2"></path></svg>
      </button>

      <div class="relative">
        <button class="flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-purple-500 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="hidden md:block font-medium">John Doe</span>
        </button>
        <!-- Dropdown would be implemented with JS, not included here -->
      </div>
    </div>
  </div>
</header>

Componente de encabezado

Un componente de encabezado con estilo Neumorphism para un portafolio con un tema oscuro, diseño interactivo y contiene varios elementos interactivos.

Abrir vista previa

                <header class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/60" alt="Logo" class="h-10 w-10 rounded-full shadow-lg">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">My Portfolio</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Projects</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Contact</a>
    </nav>
    <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full shadow-lg">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 hover:bg-blue-600 dark:hover:bg-blue-800">Get In Touch</button>
    </div>
</header>

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 vista previa

                <header class="relative w-full py-4 dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center px-4">
    <div class="text-2xl font-bold text-gray-800 dark:text-white relative">
      Dashboard
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-300 rounded-full animate-ping"></span>
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-500 rounded-full"></span>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-300 ease-in-out">
        <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600 dark:text-gray-300">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </span>
      </div>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-purple-200 dark:hover:bg-purple-600 transition duration-300 ease-in-out">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a6 6 0 00-6 0m6 0h-6"></path></svg>
      </button>
      <img class="h-10 w-10 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
    <button class="md:hidden text-gray-600 dark:text-gray-300">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </div>
</header>

Encabezado de panel complejo

Un componente de encabezado complejo y receptivo con elementos de diseño 3D, combinación de colores en tonos tierra, diseñado para tableros. Incluye soporte para temas oscuros usando Tailwind CSS y usa picsum.photos y randomuser.me para imágenes / avatares de demostración.

Abrir vista previa

                <header class="bg-gradient-to-br from-gray-700 via-gray-800 to-gray-900 text-white dark:from-gray-900 dark:via-gray-950 dark:to-black shadow-2xl">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <svg class="h-10 w-10 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm9 9b2 0 002-2v-2a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2h2z"></path></svg>
        </div>
        <div class="ml-3">
          <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 dark:from-green-300 dark:to-blue-400">Dashboard</h1>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Overview</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Reports</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Analytics</a>
          <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-1">Settings</a>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
      <a href="#" class="text-gray-300 hover:text-white dark:text-gray-400 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Settings</a>
    </div>
  </div>
</header>

Categorías