Componente della barra laterale
Un componente della barra laterale in stile Glassmorphism con una combinazione di colori complementari, progettato per un sito web portfolio con complessità moderata. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="flex h-screen bg-gray-200 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out">
<!-- Glassmorphism Effect -->
<div class="absolute inset-0 bg-blue-500 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded"></div>
<!-- Sidebar Content -->
<div class="relative z-10">
<div class="flex items-center space-x-2">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
</div>
<nav class="mt-8">
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H6a1 1 0 01-1-1v-5a1 1 0 011-1h2"></path></svg>
<span>Home</span>
</a>
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7-7h.01"></path></svg>
<span>Projects</span>
</a>
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-5m0 0l2-2m-2 2l-2-2m7-3a2 2 0 11-4 0 2 2 0 014 0zM14 13h3m-3 3h3m-9-2h.01"></path></svg>
<span>Blog</span>
</a>
<a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span>Contact</span>
</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-10">
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Welcome to my Portfolio</h1>
<!-- Add your main content here -->
</div>
</div>Componenti correlati
Componente della barra laterale
Un componente reattivo della barra laterale della modalità scura progettato utilizzando Tailwind CSS, con sfondi scuri, effetti al passaggio del mouse e segnaposto per immagini e avatar.
Neon_Glow_Grayscale_Sports_Sidebar
Un componente della barra laterale complesso e reattivo per applicazioni sportive/fitness, con effetti neon/bagliore all'interno di una combinazione di colori in scala di grigi. Include il supporto per la modalità oscura ed elementi interattivi come profilo, navigazione, team e impostazioni.
RetroImmobiliareBarra laterale
Un componente della barra laterale semplice e reattivo con un'estetica retrò/vintage, una combinazione di colori neutri caldi, progettato per le piattaforme immobiliari. Include il supporto per la modalità oscura.