Rechercher des composants

Catégories

En-tête

Section supérieure du site Web, contenant généralement le logo et la navigation

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 Aperçu

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

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 Aperçu

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

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.

Ouvrir Aperçu

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

Composant d’en-tête

Composant d’en-tête avec micro-interactions, schéma de couleurs complémentaires, complexité complexe, à des fins de tableau de bord, à l’aide de Tailwind CSS.

Ouvrir Aperçu

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

Composant d’en-tête

Composant d’en-tête de style Neumorphism pour un portfolio avec un thème sombre, un design réactif et contenant plusieurs éléments interactifs.

Ouvrir Aperçu

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

Composant d’en-tête

composant d’en-tête tailwind avec conception 3D, palette de couleurs pastel, complexité complexe, objectif du tableau de bord, conception réactive et prise en charge du thème sombre

Ouvrir Aperçu

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

En-tête de tableau de bord complexe

Un composant d’en-tête complexe et réactif avec des éléments de conception 3D, une palette de couleurs de terre, conçu pour les tableaux de bord. Inclut la prise en charge du thème sombre à l’aide de Tailwind CSS et utilise picsum.photos et randomuser.me pour les images de démonstration/avatars.

Ouvrir Aperçu

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

Skeuomorphism Triadic Simple Portfolio Header Component

Ouvrir Aperçu

                <header class="bg-gradient-to-b from-gray-200 to-gray-400 via-gray-300 dark:from-gray-800 dark:to-gray-900 dark:via-gray-700 p-6 shadow-xl">
  <div class="container mx-auto flex justify-between items-center">
    </div>
</header>

Composant d’en-tête

Un composant d’en-tête minimaliste et plat pour un portfolio, avec un design réactif avec prise en charge du thème sombre et plusieurs éléments interactifs.

Ouvrir Aperçu

                <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">My Portfolio</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </nav>
        <div class="relative md:hidden">
            <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
                <svg class="w-6 h-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 12h16m-7 6h7"></path>
                </svg>
            </button>
        </div>
    </div>
</header>
<div class="block md:hidden bg-gray-100 dark:bg-gray-700">
    <div class="container mx-auto px-4 py-2">
        <div class="flex flex-col space-y-2">
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </div>
    </div>
</div>

En-tête SocialMediaScreen

Un composant d’en-tête réactif pour les interfaces de médias sociaux, conçu avec une interface utilisateur en mode sombre utilisant un schéma de couleurs triadique et des éléments minimaux. Il comprend un titre de site, une barre de recherche et un lien vers le profil de l’utilisateur, avec des styles adaptés au mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-xl font-bold">SocialNet</div>
    <div class="flex-grow mx-4 max-w-md">
      <input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
    </div>
    <nav>
      <a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
    </nav>
  </div>
</header>