Componentes Encabezado Componente de encabezado de redes sociales

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.

Vista previa

Código HTML

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

Componentes relacionados

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

Skeuomorphism Triadic Simple Portfolio Header Component

Abrir

Componente de encabezado brutalista

Un componente de encabezado crudo y audaz diseñado con Tailwind CSS, con alto contraste y diseños inusuales adecuados para temas claros y oscuros.

Abrir