Barra laterale pastello scheumorfo
Un componente della barra laterale semplice e reattivo con design Skeuomorphic e colori pastello, adatto per un blog o un sito di contenuti. Include il supporto per la modalità oscura.
Codice HTML
<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
<span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
</div>
<nav class="flex-grow p-4">
<ul class="space-y-2">
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
Home
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
About
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
Contact
</a>
</li>
</ul>
</nav>
</div>Componenti correlati
Barra laterale Glassmorphism con modalità scura
Un componente della barra laterale reattiva con design glassmorphism e supporto per la modalità oscura utilizzando Tailwind CSS. Include un logo, il nome del sito, i link di navigazione e la sezione del profilo utente.
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.
3D_Sidebar_Documentation_Wiki
Un componente complesso della barra laterale reattiva ispirato al 3D per la documentazione e i siti wiki, che utilizza neutri caldi con supporto completo per la modalità scura.