Sticky Navigation 구성 요소

<header class="bg-gray-800 dark:bg-gray-900 shadow-lg sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full bg-white shadow-md">
                <h1 class="text-white text-2xl font-semibold">My Portfolio</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="#about" class="text-gray-200 hover:text-gray-100">About</a>
                <a href="#projects" class="text-gray-200 hover:text-gray-100">Projects</a>
                <a href="#contact" class="text-gray-200 hover:text-gray-100">Contact</a>
                <a href="#blog" class="text-gray-200 hover:text-gray-100">Blog</a>
            </nav>
            <div class="md:hidden">
                <button class="text-gray-200 focus:outline-none" aria-label="Open menu">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</header>

<main class="py-10 bg-gray-100 dark:bg-gray-800">
    <section id="about" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">About Me</h2>
        <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section id="projects" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Projects</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md">
                <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded-lg mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </section>

    <section id="contact" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-10">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200">Contact Me</h2>
        <form class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <input type="text" placeholder="Name" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
                <input type="email" placeholder="Email" class="p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" required>
            </div>
            <textarea placeholder="Message" class="mt-4 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500" rows="4" required></textarea>
            <button type="submit" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow">Send Message</button>
        </form>
    </section>
</main>

<footer class="bg-gray-800 dark:bg-gray-900 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-gray-200">© 2023 My Portfolio. All Rights Reserved.</p>
        <div class="flex justify-center space-x-4 mt-2">
            <a href="https://randomuser.me" class="text-gray-200 hover:text-gray-100" aria-label="Instagram">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </a>
            <a href="#" class="text-gray-200 hover:text-gray-100" aria-label="Twitter">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.643 4.937c-.835.37-1.734.617-2.676.726.96-.576 1.694-1.49 2.04-2.573-.897.53-1.887.916-2.943 1.125-.84-.89-2.025-1.455-3.345-1.455-2.547 0-4.608 2.036-4.608 4.547 0 .356.04.703.117 1.037-3.83-.192-7.22-2.032-9.495-4.82-.395.683-.621 1.477-.621 2.358 0 1.63.826 3.069 2.083 3.917-.767-.024-1.487-.235-2.118-.589v.059c0 2.27 1.623 4.153 3.774 4.583-.395.108-.81.165-1.236.165-.303 0-.6-.029-.889-.086.601 1.864 2.339 3.218 4.394 3.262-1.62 1.28-3.645 2.047-5.842 2.047-.38 0-.759-.022-1.133-.066 2.091 1.335 4.594 2.118 7.269 2.118 8.733 0 13.492-7.31 13.492-13.63 0-.208-.004-.415-.015-.621.918-.658 1.714-1.48 2.347-2.415z"/></svg>
            </a>
        </div>
    </div>
</footer>