Composants Barre de navigation Barre de navigation brutaliste

Barre de navigation brutaliste

Une barre de navigation réactive conçue dans un style brutaliste avec des couleurs à haute saturation, pour la consommation de blogs et de contenu, avec prise en charge du thème sombre.

Aperçu

HTML Code

<nav class="bg-green-600 dark:bg-green-900 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Home</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">About</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Blog</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Contact</a>
        </div>
        <div class="hidden md:flex items-center space-x-4">
            <a href="#" class="text-white bg-yellow-400 dark:bg-yellow-600 px-4 py-2 rounded-lg hover:bg-yellow-300 dark:hover:bg-yellow-500">Sign In</a>
            <a href="#" class="text-white bg-red-500 dark:bg-red-700 px-4 py-2 rounded-lg hover:bg-red-400 dark:hover:bg-red-600">Get Started</a>
        </div>
    </div>
    <div class="md:hidden mt-2">
        <button class="text-white rounded-md p-2 hover:bg-yellow-300 dark:hover:bg-yellow-500">
            Menu
        </button>
    </div>
</nav>
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-4">
    <h1 class="text-3xl font-bold">Welcome to My Blog</h1>
    <p class="mt-2">Discover amazing articles and content that inspire and educate.</p>
    <img class="mt-4 rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
    <div class="flex mt-4 space-x-4">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
    </div>
</div>

Composants associés

Composant de la barre de navigation 47

Une barre de navigation réactive avec un style de conception 3D, incorporant de la profondeur et de l’engagement, prenant en charge le thème sombre.

Ouvrir

Social-Media-Glassmorphism-Navbar

Barre de navigation réactive Glassmorphism sur les réseaux sociaux avec mode sombre

Ouvrir

Barre de navigation Art Déco

Une barre de navigation réactive, inspirée de l’Art Déco, pour les outils CRM/Business, avec des motifs géométriques, des tons de bijoux riches et la prise en charge du mode sombre. Conçu avec une complexité modérée, y compris des éléments interactifs.

Ouvrir