Componenti Barra laterale Barra laterale del blog semplice e vibrante

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.

Anteprima

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 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.

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

Barra laterale per l'e-commerce

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

Aperto