메가 메뉴 컴포넌트

소셜 미디어 인터페이스를 위한 그레이스케일 색 구성표가 있는 다크 모드 UI로 설계된 반응형 메가 메뉴 컴포넌트입니다.

미리 보기

HTML 코드

<div class="bg-gray-900 text-white p-5">
    <div class="container mx-auto">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-bold">Social Media</h1>
            <nav class="hidden md:flex space-x-4">
                <a href="#" class="hover:underline">Home</a>
                <a href="#" class="hover:underline">Profile</a>
                <a href="#" class="hover:underline">Messages</a>
                <a href="#" class="hover:underline">Settings</a>
            </nav>
            <div class="md:hidden cursor-pointer">
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white"></span>
            </div>
        </div>
        <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 1" class="rounded-lg mb-3">
                <p class="text-center">Title 1</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 2" class="rounded-lg mb-3">
                <p class="text-center">Title 2</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 3" class="rounded-lg mb-3">
                <p class="text-center">Title 3</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-gray-800 text-gray-300 p-5">
    <div class="container mx-auto">
        <h2 class="text-lg font-semibold">User Profiles</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 1</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 2</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User 3" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 3</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User 4" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 4</p>
            </div>
        </div>
    </div>
</div>

메가 메뉴 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

메가 메뉴 구성 요소 - Paper/Print Retro Crypto

메가 메뉴 컴포넌트

메가 메뉴 구성 요소 - 숲/녹색, 미시적 상호 작용, 비영리