CCHub Logo CCHub Tailwind Collection
구성 요소 사이트 맵 사이트 맵 구성 요소

사이트 맵 구성 요소

Tailwind CSS를 사용하여 다크 모드에서 설계된 반응형 사이트 맵 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <ul class="space-y-3">
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Home</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>About Us</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Services</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Contact</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Privacy Policy</span>
            </a>
        </li>
    </ul>
    <div class="mt-5">
        <h3 class="text-xl font-semibold">Follow Us</h3>
        <ul class="flex space-x-4 mt-2">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
        </ul>
    </div>
</div>

관련 구성 요소

Industrial_Site_Map_Component

따뜻한 중립을 사용하는 산업 디자인 미학이 있는 농업/농업 웹사이트를 위한 사이트 맵 구성 요소입니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 링크 섹션이 특징입니다.

열다

Neon_Glow_Sports_Sitemap_Component

네온/글로우 효과와 고대비 색상이 있는 간단하고 반응형 사이트맵 구성 요소로, 스포츠/피트니스 애플리케이션에 맞게 조정됩니다. 다크 모드 지원이 포함됩니다.

열다

Neumorphic_Real_Estate_Sitemap_Component

그라데이션 무지개 색 구성표와 다크 모드를 지원하는 부동산 플랫폼을 위한 간단하고 반응이 빠른 뉴모픽 사이트 맵 구성 요소입니다.

열다