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

사이트 맵 구성 요소

소셜 미디어 인터페이스를 위한 머티리얼 디자인 스타일의 사이트맵 구성 요소로, Tailwind CSS를 사용하여 응답성과 다크 모드를 지원합니다. 소셜 네트워킹 플랫폼을 위한 어스 톤과 중간 복잡성을 통합합니다.

미리 보기

HTML 코드 

<div class="bg-stone-100 text-stone-800 p-8 dark:bg-stone-800 dark:text-stone-200">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div>
        <h3 class="text-xl font-semibold mb-4">General</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Home</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">About Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Contact</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Blog</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Account</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Profile</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Settings</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Security</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Social</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Feed</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Messages</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Friends</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Groups</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Resources</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Help Center</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Neumorphic_Industrial_Sitemap

산업 및 제조 기업을 위한 반응형 뉴모픽 사이트 맵 구성 요소로, 단색 색 구성표와 다크 모드 지원을 특징으로 합니다. 요소는 미묘한 그림자를 사용하여 배경에서 돌출된 것처럼 보입니다.

열다

사이트 맵 구성 요소

기술/SaaS 애플리케이션을 위한 간단하고 반응이 빠른 사이트맵 구성 요소로, 다크 모드 UI와 무지개 그라데이션 액센트가 있습니다. 최소한의 요소와 명확한 탐색에 최적화되었습니다.

열다

사이트 맵 구성 요소

어스 톤 색 구성표로 스큐어모피즘 디자인 스타일을 구현하는 복잡한 사이트 맵 구성 요소로, 어두운 테마를 지원합니다. Tailwind CSS를 사용하여 대화형 요소가 있는 블로그/콘텐츠 목적으로 설계되었습니다.

열다