Composants Composants de navigation Composant de navigation skeuomorphe

Composant de navigation skeuomorphe

Un composant de navigation conçu avec un style skeuomorphe, avec une palette de couleurs complémentaires, adapté à un tableau de bord avec visualisation de données et panneaux de contrôle. Il comprend des éléments interactifs pour l’engagement des utilisateurs.

Aperçu

HTML Code

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

Composants associés

Composant Composants de navigation

Une barre de navigation réactive avec prise en charge du mode sombre.

Ouvrir

Navigation skeuomorphe

Un composant de navigation simple et réactif avec un design skeuomorphique, une palette de couleurs analogue adaptée aux applications de médias sociaux, avec prise en charge du thème sombre.

Ouvrir

Navigation brutaliste sur les réseaux sociaux

Un composant de navigation réactif conçu dans un style brutaliste pour les applications de médias sociaux, utilisant une palette de couleurs complémentaires et des éléments minimaux.

Ouvrir