Composants Navigation collante Composant de navigation collante

Composant de navigation collante

Une barre de navigation autocollante réactive conçue avec des micro-interactions et une palette de couleurs triadique, adaptée aux blogs et à la consommation de contenu.

Aperçu

HTML Code

<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">&copy; 2023 MyBlog. All rights reserved.</p>
</footer>

Composants associés

Skeuomorphe en niveaux de gris Sticky Nav

Une barre de navigation autocollante réactive pour les blogs, stylisée avec un skeuomorphisme à l’aide d’une palette en niveaux de gris. Dispose d’une prise en charge du mode sombre et d’une mise en page simple. Construit avec Tailwind CSS (HTML uniquement), pas de JavaScript. Le design skeuomorphe vise à faire apparaître la barre de navigation comme un élément physique, légèrement en relief.

Ouvrir