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

Navigazione con nemorfismo

Un semplice componente di navigazione reattivo con stile Neumorfismo per l'e-commerce.

Aperto

Componente di navigazione minimalista Earth Tones

Un componente di navigazione dal design minimalista e piatto con una combinazione di colori color terra, adatto per siti Web di consulenza/servizi. Include un design reattivo per desktop, tablet e dispositivi mobili e supporta la modalità oscura.

Aperto

Navigazione del portfolio in modalità scura

Un componente di navigazione complesso e reattivo per un sito web di portfolio, dotato di un'interfaccia utente in modalità scura con colori analoghi, progettato per mostrare lavori o prodotti. Include layout per desktop, tablet e dispositivi mobili con menu a discesa e avatar utente.

Aperto