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>

관련 구성 요소

사이트 맵 구성 요소

glassmorphism으로 설계된 반응형 사이트 맵 구성 요소로, 반투명 유리와 같은 반투명 효과와 흐림 효과를 특징으로 하여 작업 또는 제품을 보여주는 포트폴리오를 제공합니다. 어두운 테마를 지원하고 보색을 사용하면서 적당한 복잡성을 유지합니다.

열다

사이트 맵 구성 요소

포트폴리오를 위한 단순하고 생생한 3D에서 영감을 받은 사이트 맵 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원합니다.

열다

Neumorphic_Real_Estate_Sitemap_Component

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

열다