Componente de navegación de la barra lateral de redes sociales
Componente de navegación de barra lateral de redes sociales receptivo con soporte de tema oscuro que usa brutalismo, tonos de tierra y principios de diseño complejos. No se necesita JavaScript.
Código HTML
<div class="flex h-screen bg-stone-100 dark:bg-stone-900">
<!-- Sidebar -->
<div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
<!-- Profile Section -->
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div>
<h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
<p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
</div>
</div>
<hr class="border-stone-900 dark:border-stone-100">
<!-- Navigation -->
<nav class="space-y-4">
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
<a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
</nav>
<hr class="border-stone-900 dark:border-stone-100">
<!-- Footer Links -->
<div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
<a href="#" class="hover:underline focus:underline">About</a>
<a href="#" class="hover:underline focus:underline">Help</a>
<a href="#" class="hover:underline focus:underline">Terms</a>
<a href="#" class="hover:underline focus:underline">Privacy</a>
</div>
</div>
<!-- Content Area - Example -->
<div class="flex-1 p-6">
<h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
</div>
</div>Componentes relacionados
Glassmorphism Sidebar Navigation
Un componente de navegación de barra lateral receptiva al estilo de Glassmorphism para carteras, con soporte para modo oscuro y combinación de colores análoga. Cuenta con efectos de vidrio esmerilado y múltiples elementos interactivos que usan solo HTML y Tailwind CSS.
Glassmorphism Sidebar Navigation
Una barra de navegación lateral de Glassmorphism compleja y receptiva para un tablero con un esquema de color complementario, compatibilidad con modo oscuro y sin JavaScript.
Componente de navegación de la barra lateral
Un componente de navegación de la barra lateral adaptado para blogs, diseñado con elementos 3D y colores vibrantes. Admite el modo oscuro y es responsivo, con un diseño simple adecuado para el consumo de contenido.