Componenti Navigazione permanente Componente di navigazione permanente

Componente di navigazione permanente

Un componente di navigazione appiccicosa in stile brutalista adatto alle interfacce dei social media, caratterizzato da un design audace e ad alto contrasto e dal supporto della modalità scura.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente di navigazione permanente

Una barra di navigazione appiccicosa minimalista e reattiva per i blog, caratterizzata da una combinazione di colori vivaci. Supporta la modalità oscura e ha un layout semplice e pulito con "Titolo del blog" a sinistra e collegamenti di navigazione a destra. La barra di navigazione si blocca nella parte superiore del riquadro di visualizzazione quando l'utente scorre.

Aperto

Componente di navigazione permanente

Componente di navigazione appiccicosa con stile Glassmorphism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Navigazione appiccicosa retrò per l'e-commerce

Un componente di navigazione appiccicosa retrò/vintage per siti di e-commerce con colori vivaci, elementi complessi, reattività e supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto