Composants Barre latérale Composant de la barre latérale

Composant de la barre latérale

Un composant de barre latérale réactif pour un portfolio, avec un style de conception 3D avec un thème sombre, adapté à la présentation de travaux ou de produits, avec quelques éléments interactifs et une palette de couleurs analogue.

Aperçu

HTML Code

<aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
    <div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
        <h1 class="text-white text-lg font-bold">My Portfolio</h1>
    </div>
    <nav class="flex flex-col p-4">
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Home</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>About</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Projects</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Contact</span>
        </a>
    </nav>
    <footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
        <p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
    </footer>
</aside>

Composants associés

Composant de la barre latérale de crypto-monnaie

Un composant de barre latérale complexe et réactif conçu pour les applications de crypto-monnaie et de blockchain, avec des principes de conception matérielle avec une palette de couleurs sourdes et une prise en charge complète du mode sombre.

Ouvrir

RetroRealEstateBarre latérale

Un composant de barre latérale simple et réactif avec une esthétique rétro/vintage, une palette de couleurs neutres et chaudes, conçu pour les plateformes immobilières. Inclut la prise en charge du mode sombre.

Ouvrir

Barre latérale du commerce électronique

Barre latérale Glassmorphism réactive pour le commerce électronique avec mode sombre

Ouvrir