메가 메뉴 컴포넌트
반응형 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>관련 구성 요소
메가 메뉴 컴포넌트
Tailwind CSS를 사용하여 구축된 회색조 색 구성표가 있는 간단한 다크 모드 전자 상거래 메가 메뉴 구성 요소입니다. 반응형이며 Tailwind의 dark: 접두사를 사용하여 어두운 테마에 대한 지원을 포함합니다.
메가 메뉴 컴포넌트
모노스페이스/개발자의 미학과 따뜻한 무채색 구성표로 설계된 복잡하고 반응이 빠른 메가 메뉴 구성 요소로, 전문 컨설팅/서비스 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.