Componente de navegación pegajosa
Un componente de navegación pegajoso de estilo brutalista adecuado para interfaces de redes sociales, con un diseño audaz y de alto contraste y compatibilidad con el modo oscuro.
Código HTML
<nav class="bg-blue-600 dark:bg-blue-900 fixed top-0 w-full z-30 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<h1 class="text-white text-lg font-bold">Social Media</h1>
</div>
<ul class="flex space-x-8">
<li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Home</a></li>
<li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Profile</a></li>
<li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Messages</a></li>
<li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Settings</a></li>
</ul>
</div>
</nav>
<header class="mt-16 p-4 bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto">
<h2 class="text-2xl text-gray-900 dark:text-white font-bold">Welcome to Our Network</h2>
<p class="text-gray-700 dark:text-gray-300">Connect with friends and the world around you!</p>
</div>
</header>
<main class="mt-4 p-4 container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
<img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">This is a sample post content. It can be about anything interesting happening on the network.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
<img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-lg mb-4">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Another sample post content with some engaging information for users.</p>
</div>
</div>
</main>Componentes relacionados
Componente de navegación pegajosa
Una barra de navegación compleja, esqueuomórfica y pegajosa con colores vibrantes, diseñada para interfaces de redes sociales. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS. Cuenta con imagen de perfil, barra de búsqueda, notificaciones e iconos de mensajería.
Navegación pegajosa skeuomórfica en escala de grises
Una barra de navegación pegajosa y receptiva para blogs, diseñada con esqueuomorfismo utilizando una paleta en escala de grises. Cuenta con soporte para modo oscuro y un diseño simple. Construido con Tailwind CSS (solo HTML), sin JavaScript. El diseño skeuomórfico tiene como objetivo hacer que la barra de navegación parezca un elemento físico ligeramente elevado.
Componente de navegación pegajosa
Un componente de navegación pegajoso y receptivo diseñado con los principios de Material Design utilizando Tailwind CSS, con un tema oscuro e incluyendo imágenes de marcador de posición aleatorias y avatar.