CCHub Logo CCHub Tailwind Collection
구성 요소 메가 메뉴 메가 메뉴 컴포넌트

메가 메뉴 컴포넌트

반응형 Mega Menu Component는 비즈니스 및 기업 웹사이트를 위한 그레이스케일 색 구성표의 스큐어모픽 스타일로 설계되었습니다. 어두운 테마를 지원하고 스타일링에 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=1" alt="Service 1" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Consulting</h3>
            <p class="text-gray-600 dark:text-gray-400">Professional consulting services to help you grow.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Service 2" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Marketing</h3>
            <p class="text-gray-600 dark:text-gray-400">Effective marketing strategies tailored to your needs.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Service 3" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Support</h3>
            <p class="text-gray-600 dark:text-gray-400">24/7 support to assist with your queries.</p>
        </div>
    </div>
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mt-8">About Us</h2>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
        <p class="text-gray-600 dark:text-gray-400">Our team is dedicated to providing exceptional service and value.</p>
    </div>
</div>

관련 구성 요소

메가 메뉴 컴포넌트

블로그/콘텐츠 웹사이트에 대한 Neumorphism 스타일의 Mega Menu Component, Analogous color scheme 및 Moderate complexity를 사용합니다. 어두운 테마를 지원하는 반응형 디자인. 자바스크립트가 없습니다.

열다

메가 메뉴 컴포넌트

미니멀리스트/플랫 디자인, 생생한 색 구성표, 복잡한 복잡성 수준이 있는 메가 메뉴 구성 요소, 대시보드 목적, Tailwind CSS 사용. 어두운 테마를 지원하는 반응형 디자인. JavaScript 코드는 없으며 Tailwind 클래스가있는 HTML 만 있습니다. 다크 모드는 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 아바타에 picsum.photos 및 randomuser.me 를 사용합니다.

열다

메가 메뉴 컴포넌트

Neumorphism 스타일의 Mega Menu Component는 블로그 및 콘텐츠 소비를 위해 설계된 단색 색 구성표를 사용합니다. 다크 모드로 반응형 디자인을 지원합니다.

열다