Composants En-tête Composant d’en-tête 3D

Composant d’en-tête 3D

Composant d’en-tête complexe et interactif conçu pour les interfaces de médias sociaux à l’aide d’un style 3D avec des couleurs en niveaux de gris. Il comprend un logo, une barre de recherche, des avatars d’utilisateurs et des boutons d’action, avec un comportement réactif et une prise en charge du mode sombre.

Aperçu

HTML Code

<header class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 flex items-center justify-between">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
        <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">Social Media App</h1>
    </div>
    <div class="flex-grow mx-4">
        <input type="text" placeholder="Search..." class="bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-shadow duration-300 shadow-md dark:shadow-lg" />
    </div>
    <div class="flex items-center">
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg mr-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
    </div>
</header>

Composants associés

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

RetroHeaderComponent

Composant d’en-tête rétro/vintage avec effets réactifs et prise en charge du thème sombre.

Ouvrir

En-tête d’entreprise de conception matérielle

Material Design a inspiré un composant d’en-tête simple avec une palette de couleurs complémentaire pour les sites Web d’entreprise. Conception réactive avec prise en charge du thème sombre.

Ouvrir