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 della criptovaluta

Un componente della barra laterale complesso e reattivo progettato per applicazioni di criptovaluta e blockchain, dotato di principi di Material Design con una combinazione di colori tenui e supporto completo della modalità oscura.

Aperto

Componente della barra laterale

Un componente della barra laterale complesso, reattivo, in stile Glassmorphism per un cruscotto, con toni della terra e supporto per la modalità scura.

Aperto