Composant de navigation collante
Une barre de navigation autocollante complexe et skeuomorphe aux couleurs vives, conçue pour les interfaces de médias sociaux. Comprend un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend une image de profil, une barre de recherche, des notifications et des icônes de messagerie.
HTML Code
<nav class="sticky top-0 bg-gradient-to-b from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50">
<div class="container mx-auto flex items-center justify-between">
<!-- Profile Pic and Site Title -->
<div class="flex items-center">
<img class="h-10 w-10 rounded-full border-2 border-white mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
<span class="text-white text-2xl font-bold drop-shadow-md">SocialNet</span>
</div>
<!-- Search Bar -->
<div class="flex-grow mx-5">
<input type="text" placeholder="Search..." class="w-full px-4 py-2 rounded-full bg-white bg-opacity-30 text-white placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 dark:placeholder-gray-300">
</div>
<!-- Icons -->
<div class="flex items-center space-x-6">
<a href="#" class="text-white hover:scale-110 transition-transform duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
</a>
<a href="#" class="text-white hover:scale-110 transition-transform duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55c-.18.18-.42.29-.67.29H9v-.54l-.55-.55z"/>
</svg>
</a>
</div>
</div>
</nav>Composants associés
Composant de navigation collante
Un composant de navigation autocollant au design plat minimaliste avec une palette de couleurs monochromatique pour les sites Web d’entreprise. La conception comprend plusieurs éléments interactifs et prend en charge le thème sombre.
Composant de navigation collante
Une barre de navigation autocollante minimaliste et réactive pour les blogs, avec une palette de couleurs vives. Il prend en charge le mode sombre et a une mise en page simple et propre avec « Titre du blog » à gauche et des liens de navigation à droite. La barre de navigation se colle en haut de la fenêtre d’affichage lorsque l’utilisateur fait défiler la page.
Skeuomorphe en niveaux de gris Sticky Nav
Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.