Composants Navigation dans la barre latérale Navigation dans la barre latérale

Navigation dans la barre latérale

Composant de navigation dans la barre latérale réactif avec jeu de couleurs analogues et micro-interactions, y compris la prise en charge du thème sombre.

Aperçu

HTML Code

<div class="flex h-screen bg-gray-100 dark:bg-gray-800">

    <!-- Sidebar -->
    <div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
        <div class="p-4 text-center text-2xl font-bold">Dashboard</div>
        <nav class="mt-6">
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
        </nav>
    </div>

    <!-- Content area -->
    <div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
        <h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
        <p>This is the main content area.</p>
    </div>

</div>

Composants associés

RetroPastelSocialBarre latérale

Un composant de navigation de la barre latérale simple et réactif avec un design rétro/vintage des années 80/90, des couleurs pastel et la prise en charge du mode sombre, conçu pour les interfaces de médias sociaux utilisant Tailwind CSS.

Ouvrir

RetroBarre latéraleNavigation

Un composant de navigation dans la barre latérale de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Composant de navigation dans la barre latérale

Un composant de navigation dans la barre latérale simple et réactif avec des effets de survol axés sur la micro-interaction, conçu pour les sites Web gouvernementaux/de services publics. Dispose d’une palette de couleurs analogue et d’une prise en charge du mode sombre.

Ouvrir