Composants de navigation
Un composant de navigation conçu avec un style brutaliste, avec une palette de couleurs pastel pour les interfaces de médias sociaux, avec une mise en page réactive et une prise en charge du thème sombre.
HTML Code
<nav class="flex flex-col md:flex-row justify-between items-center p-4 bg-pink-200 dark:bg-gray-800">
<div class="flex items-center mb-4 md:mb-0">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">MySocial</h1>
</div>
<ul class="flex flex-col md:flex-row">
<li class="mx-2">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Home</a>
</li>
<li class="mx-2">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Profile</a>
</li>
<li class="mx-2">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Messages</a>
</li>
<li class="mx-2">
<a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Settings</a>
</li>
<li class="mx-2">
<a href="#" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-200">Logout</a>
</li>
</ul>
</nav>
<section class="p-4 space-y-5">
<article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
<h2 class="font-bold text-gray-800 dark:text-white">Recent Posts</h2>
<p class="text-gray-700 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
<h2 class="font-bold text-gray-800 dark:text-white">User Activity</h2>
<p class="text-gray-700 dark:text-gray-200">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
<h2 class="font-bold text-gray-800 dark:text-white">Trending Topics</h2>
<p class="text-gray-700 dark:text-gray-200">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</article>
</section>
<footer class="bg-pink-200 dark:bg-gray-800 p-4 text-center">
<p class="text-gray-800 dark:text-white">© 2022 MySocial. All rights reserved.</p>
</footer>Composants associés
Composant Composants de navigation
Une barre de navigation réactive avec prise en charge du mode sombre.
Monospace_Developer_Simple_Finance_Navigation
Un composant de navigation simple, épuré et inspiré du code pour les interfaces financières/bancaires, avec des polices monospaces, des tons chauds de coucher de soleil et une réactivité totale avec prise en charge du mode sombre.
Composant de navigation
Un composant de navigation réactif conçu avec des micro-interactions et proposant des animations attrayantes basées sur les actions de l’utilisateur, prenant en charge les thèmes clairs et sombres. Le composant comprend un avatar de profil, des liens de navigation et des effets de survol.