Componenti Componenti di navigazione Navigazione brutalista sui social media

Navigazione brutalista sui social media

Un componente di navigazione reattivo progettato in uno stile brutalista per le applicazioni dei social media, utilizzando una combinazione di colori complementari ed elementi minimi.

Anteprima

Codice HTML

<nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
        <a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
        </ul>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
        <a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
    </div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
    <img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>

Componenti correlati

Componente Componenti di navigazione

Una barra di navigazione reattiva con supporto per la modalità oscura.

Aperto

Navigazione sociale brutalista

Un componente di navigazione semplice e brutalista per i social media con colori complementari. Include il design reattivo e il supporto per la modalità scura.

Aperto

Barra di navigazione retrò per l'e-commerce

Un componente di navigazione in scala di grigi in stile retrò/vintage per l'e-commerce, caratterizzato da una complessità moderata con elementi interattivi come passaggi del mouse e menu a discesa. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto