Barra di navigazione del blog
Barra di navigazione reattiva con supporto della modalità oscura per siti Web di blog/contenuti. Presenta un design minimalista/piatto con una combinazione di colori pastello.
Codice HTML
<nav class="bg-pink-100 dark:bg-purple-900 p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
</div>
</div>
</nav>Componenti correlati
Componente della barra di navigazione
Una barra di navigazione reattiva con microinterazioni e supporto per la modalità oscura utilizzando Tailwind CSS.
Barra di navigazione del portfolio
Una barra di navigazione reattiva con supporto per temi scuri, progettata per un sito Web portfolio utilizzando i principi del Material Design e la combinazione di colori dei toni della terra. Include un logo del marchio, collegamenti di navigazione e un pulsante di invito all'azione. Il design è moderatamente complesso e si adatta a diverse dimensioni dello schermo.
Barra di navigazione skeuomorphic
Un componente della barra di navigazione reattivo progettato in uno stile scheumorfico con supporto per temi scuri utilizzando Tailwind CSS.