Composants En-tête Composant d’en-tête de réseau social

Composant d’en-tête de réseau social

Un composant d’en-tête complexe, réactif en mode sombre, au design minimaliste et aux couleurs complémentaires, conçu pour les interfaces de médias sociaux.

Aperçu

HTML Code

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

Composants associés

Composant d’en-tête

Un composant d’en-tête réactif pour un tableau de bord avec des micro-interactions et des couleurs vives, prenant en charge le thème sombre.

Ouvrir

Composant d’en-tête skeuomorphic

Un composant d’en-tête simple et réactif conçu pour les sites Web de commerce électronique avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre.

Ouvrir

Composant d’en-tête vintage rétro

Un composant d’en-tête réactif avec un style de design rétro/vintage, avec prise en charge du mode sombre et une esthétique nostalgique inspirée des années 80 et 90.

Ouvrir