Composant de navigation collante
Un composant de navigation autocollant de style brutaliste adapté aux interfaces de médias sociaux, doté d’un design audacieux et contrasté et d’une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de navigation collante
Une barre de navigation autocollante complexe et skeuomorphe aux couleurs vives, conçue pour les interfaces de médias sociaux. Comprend un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend une image de profil, une barre de recherche, des notifications et des icônes de messagerie.
Composant de navigation autocollant - Mode sombre Pastel
Une barre de navigation autocollante conçue pour le mode sombre, avec une mise en page réactive et des accents de couleurs pastel. La barre de navigation reste en haut de la fenêtre d’affichage lorsque l’utilisateur fait défiler l’écran, ce qui améliore la convivialité des pages à fort contenu. Il comprend des espaces réservés pour un logo ou un titre de site et des liens de navigation, stylisés avec Tailwind CSS pour un look moderne et épuré.
Composant de navigation collante
Une barre de navigation autocollante réactive conçue avec des micro-interactions et une palette de couleurs triadique, adaptée aux blogs et à la consommation de contenu.