Componenti di navigazione
Un componente di navigazione progettato con uno stile brutalista, caratterizzato da una combinazione di colori pastello per le interfacce dei social media, con un layout reattivo e supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Componente di navigazione Brutalismo
Un componente di navigazione reattivo progettato in stile brutalista, che mostra una combinazione di colori monocromatica, ideale per un sito web portfolio. Le caratteristiche includono un layout audace con contrasto elevato, supporto della modalità oscura utilizzando Tailwind CSS ed elementi interattivi come menu a discesa o collegamenti ai pulsanti.
Componente di navigazione
Un componente di navigazione reattivo progettato con microinterazioni e caratterizzato da animazioni coinvolgenti basate sulle azioni dell'utente, che supportano temi chiari e scuri. Il componente include l'avatar del profilo, i collegamenti di navigazione e gli effetti al passaggio del mouse.
Componenti di navigazione
Un componente di navigazione minimalista per un sito Web di e-commerce, con un logo, una barra di ricerca, collegamenti di navigazione, icona del carrello e avatar dell'utente utilizzando Tailwind CSS. Questo componente supporta il design reattivo e la modalità oscura.