Composants Barre de navigation Barre de navigation skeuomorphe

Barre de navigation skeuomorphe

Une barre de navigation simple et réactive pour les médias sociaux avec un style de conception skeuomorphe, utilisant une palette de couleurs analogue et prenant en charge le mode sombre.

Aperçu

HTML Code

<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
        </div>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
        </ul>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
        </div>
    </div>
</nav>

Composants associés

Composant de la barre de navigation

Un composant de barre de navigation réactif conçu dans le style Material Design avec une palette de couleurs triadique, adapté aux interfaces de médias sociaux et incluant la prise en charge du thème sombre.

Ouvrir

Barre de navigation skeuomorphe

Composant de la barre de navigation du portfolio conçu avec des styles skeuomorphes et une palette de couleurs pastel, y compris la prise en charge du mode sombre. Il comporte des éléments interactifs tels que des liens et un menu déroulant.

Ouvrir

Artsy_Neon_Crypto_Navbar

Une barre de navigation complexe et réactive pour les applications de crypto-monnaie/blockchain avec un design artistique inspiré de l’aquarelle et une palette de couleurs vives et néon. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir