Componenti Barra laterale Componente della barra laterale

Componente della barra laterale

Un componente reattivo della barra laterale progettato con lo stile Neumorphism utilizzando Tailwind CSS. Presenta un aspetto morbido dell'interfaccia utente con ombre sottili, supporta la modalità oscura e include immagini segnaposto e avatar.

Anteprima

Codice HTML

<div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
    <div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
            <h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
        </div>
        <nav>
            <ul>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
                </li>
                <li class="my-2">
                    <a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
        <img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
    </div>
</div>

Componenti correlati

Barra laterale per l'e-commerce

Barra laterale Glassmorphism reattiva per l'e-commerce con modalità scura

Aperto

Componente della barra laterale

Un componente della barra laterale reattivo e minimalista per l'e-commerce, con supporto per la modalità scura. Presenta un layout semplice con categorie di prodotti e un'icona del carrello della spesa.

Aperto

Componente della barra laterale

Un componente della barra laterale reattivo progettato in uno stile retrò/vintage con colori vivaci per un layout del cruscotto. Include il supporto per la modalità oscura.

Aperto