Navegación brutalista de las redes sociales
Un componente de navegación responsivo diseñado en un estilo brutalista para aplicaciones de redes sociales, utilizando un esquema de color complementario y elementos mínimos.
Código HTML
<nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
<ul class="flex space-x-4">
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
</ul>
</div>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
</div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
<img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>
Componentes relacionados
Cyberpunk_Food_Nav
Un componente de navegación simple y receptivo con temática cyberpunk para sitios web de comida/restaurantes, con fondos oscuros, acentos de neón y compatibilidad con el modo oscuro.
Navegación por neumorfismo
Un componente de navegación responsivo simple con estilo Neumorphism para el comercio electrónico.
Navegación lúdica en el panel de control
Un componente de navegación de tablero simple, divertido y receptivo que utiliza tonos joya con elementos redondeados y soporte completo para el modo oscuro.