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

사이트 맵 구성 요소

어두운 테마의 브루탈리즘 스타일로 디자인된 사이트 맵 구성 요소는 전문 비즈니스 웹사이트에 이상적입니다. 그것은 높은 대비와 상호 작용 요소가 있는 대담한 레이아웃을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
    <h2 class="text-3xl font-bold mb-4">Site Map</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">About Us</h3>
            <p class="text-gray-300">Learn more about our company and values.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Services</h3>
            <p class="text-gray-300">Explore the services we offer to our clients.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Contact</h3>
            <p class="text-gray-300">Get in touch with us for inquiries.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Blog</h3>
            <p class="text-gray-300">Read our latest articles and updates.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">FAQ</h3>
            <p class="text-gray-300">Find answers to common questions.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Careers</h3>
            <p class="text-gray-300">Join our team and grow your career with us.</p>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-600 pt-4">
        <h3 class="text-xl font-bold mb-2">Team</h3>
        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">John Doe</p>
                    <p class="text-gray-400">CEO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Jane Smith</p>
                    <p class="text-gray-400">CTO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Mike Johnson</p>
                    <p class="text-gray-400">CFO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Emily Davis</p>
                    <p class="text-gray-400">CMO</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-600 pt-4">
        <h3 class="text-xl font-bold mb-2">Resources</h3>
        <a href="#" class="text-blue-400 hover:underline">Documentation</a><br>
        <a href="#" class="text-blue-400 hover:underline">Sitemap</a><br>
        <a href="#" class="text-blue-400 hover:underline">Support</a>
    </div>
</div>

관련 구성 요소

사이트 맵 구성 요소

마이크로 상호 작용, 단색 색 구성표, 복잡한 디자인, 어두운 테마 지원 및 Tailwind CSS를 사용하는 반응형 사이트 맵 구성 요소입니다.

열다

사이트 맵 구성 요소

마이크로 인터랙션, 파스텔 색 구성표 및 어두운 테마 지원을 제공하는 반응형 사이트맵 구성 요소로 전자 상거래 웹사이트에 적합합니다. 여기에는 헤더, 검색 창 및 링크가 있는 여러 범주가 포함됩니다.

열다

사이트 맵 구성 요소

단색 색 구성표를 사용하여 소셜 미디어 인터페이스용으로 설계된 레트로/빈티지 사이트 맵 구성 요소입니다. 더 나은 가독성과 미적 매력을 위해 어두운 테마의 간단한 레이아웃이 특징입니다.

열다