Barra laterale del blog semplice e vibrante
Un componente della barra laterale semplice e reattivo per i contenuti del blog, progettato con colori vivaci e una sensazione simile a quella dei materiali utilizzando Tailwind CSS. Include collegamenti di navigazione e una sezione del profilo utente. Supporta la modalità oscura utilizzando il prefisso dark: di Tailwind. Risolto su schermi più grandi, nascosto su schermi più piccoli.
Codice HTML
<!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
<!-- Sidebar Header -->
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" 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 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
<span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
</div>
<!-- Navigation -->
<nav class="space-y-2">
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Home
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Categories
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Popular
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
About
</a>
</nav>
<!-- User Profile (Optional) - Position at bottom -->
<div class="absolute bottom-5 left-5 right-5">
<div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
<span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
</div>
</div>
</div>
</div>Componenti correlati
Barra laterale del neumorfismo
Un componente della barra laterale in stile Neumorphism con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
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.
Componente della barra laterale
Un componente della barra laterale reattivo per mostrare gli elementi del portfolio con microinterazioni coinvolgenti e una combinazione di colori complementare, che supporta la modalità scura.