Componente di navigazione permanente
Una barra di navigazione appiccicosa reattiva progettata con microinterazioni e una combinazione di colori triadica, adatta per blog e consumo di contenuti.
Codice HTML
<header class="bg-blue-300 dark:bg-blue-800 fixed top-0 w-full shadow-md z-10 transition-all duration-300 ease-in-out">
<div class="flex justify-between items-center p-4">
<a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold transition-transform transform hover:scale-105">MyBlog</a>
<nav class="space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">About</a>
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Blog</a>
<a href="#" class="text-gray-800 dark:text-gray-200 transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-400">Contact</a>
</nav>
</div>
<div class="bg-blue-400 dark:bg-blue-700 h-1 transition-all duration-300 ease-in-out" style="transform: scaleY(0.5);"></div>
</header>
<main class="pt-20 px-4">
<section class="my-8">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Latest Articles</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
</div>
</article>
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
</div>
</article>
<article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Article" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Article Title</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of the content that engages the reader...</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">Read More</a>
</div>
</article>
</div>
</section>
</main>
<footer class="bg-gray-300 dark:bg-gray-700 p-4 text-center">
<p class="text-gray-800 dark:text-gray-200">© 2023 MyBlog. All rights reserved.</p>
</footer>Componenti correlati
Componente di navigazione permanente
Un componente di navigazione appiccicoso dal design piatto minimalista con una combinazione di colori monocromatica per siti Web aziendali/aziendali. Il design include più elementi interattivi e supporta il tema scuro.
Componente di navigazione permanente
Componente di navigazione appiccicosa con design dello scheumorfismo, reattivo e supporto per temi scuri. Utilizza Tailwind CSS.
Componente di navigazione permanente - Modalità scura pastello
Una barra di navigazione appiccicosa progettata per la modalità scura, caratterizzata da un layout reattivo e accenti di colori pastello. La barra di navigazione rimane nella parte superiore del riquadro di visualizzazione mentre l'utente scorre, migliorando l'usabilità per le pagine con un contenuto elevato. Include segnaposto per un logo o un titolo del sito e link di navigazione, con stile CSS Tailwind per un look moderno e pulito.