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
Un componente de navegación pegajoso con un diseño esqueuomórfico, un esquema de color triádico y un diseño simple, adecuado para interfaces de redes sociales. Es compatible con el diseño responsivo y el tema oscuro.
Retro_Vintage_Sticky_Navigation_Component
Una compleja barra de navegación fija de inspiración retro/vintage diseñada para sitios web de eventos o conferencias, con una combinación de colores pastel suaves, capacidad de respuesta total y compatibilidad con el modo oscuro. Incluye un logotipo, enlaces de navegación, un botón de llamada a la acción y un icono de búsqueda.
Componente de navegación pegajoso - Modo oscuro Pastel
Una barra de navegación fija diseñada para el modo oscuro, con un diseño responsivo y acentos en colores pastel. La barra de navegación permanece en la parte superior de la ventanilla a medida que el usuario se desplaza, lo que mejora la usabilidad de las páginas con mucho contenido. Incluye marcadores de posición para un logotipo o título de sitio y enlaces de navegación, con estilo Tailwind CSS para una apariencia moderna y limpia.