Composants Navigation Composant de navigation

Composant de navigation

Un composant de navigation réactif conçu pour le mode sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>

Composants associés

Composant de navigation

Un composant de navigation réactif conçu pour l’interface utilisateur en mode sombre, avec des liens, des listes déroulantes et un logo, le tout stylisé avec Tailwind CSS.

Ouvrir

Composant de navigation par neumorphisme

Composant de navigation Neumorphism optimisé pour les sites Web de portfolio. Il présente une mise en page complexe avec plusieurs éléments interactifs, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. La palette de couleurs est analogue.

Ouvrir

Luxury_SaaS_Navigation_Candy

Un composant de navigation de style luxe/premium pour les applications SaaS, avec une palette de couleurs sur le thème des bonbons (rose bonbon, vert menthe) et une typographie sophistiquée. Il est réactif, inclut la prise en charge du mode sombre et comporte des éléments interactifs.

Ouvrir