사이트 맵

사이트 맵 구성 요소

생생한 색상과 마이크로 상호 작용, 다크 모드를 지원하는 전자 상거래 사이트를 위한 간단하고 반응이 빠른 사이트맵 구성 요소입니다.

                <div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 py-12 px-6">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold text-center mb-8">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">All Products</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Categories</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Sale Items</a></li>
        </ul>
      </div>
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Returns & Exchanges</a></li>
        </ul>
      </div>
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Careers</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 class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Follow Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Facebook</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Instagram</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Twitter</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

사이트 맵 구성 요소

대시보드에 적합한 파스텔 색상을 사용하는 어두운 모드용으로 설계된 반응형 사이트 맵 구성 요소입니다.

미리보기 열기

                <div class="bg-gray-800 text-gray-200 dark:bg-gray-900 dark:text-gray-300 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <p class="mb-4">Overview of the main sections:</p>
    <ul class="space-y-2">
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Dashboard</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>User Management</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Reports</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Settings</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <p class="font-bold">User Profile</p>
        <div class="flex items-center bg-gray-700 dark:bg-gray-800 rounded p-4 mt-2">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full mr-3">
            <span>John Doe</span>
        </div>
    </div>
</div>

사이트 맵 구성 요소

반응형 디자인과 다크 모드를 지원하는 3D 스타일 사이트 맵 구성 요소입니다. 깊이와 참여를 위한 3차원 요소가 특징이며, 무작위 자리 표시자 이미지와 아바타를 사용합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
            <img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
            <img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
        </div>
    </div>
</div>

사이트 맵 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙으로 설계된 사이트 맵 구성 요소로, 반응형 레이아웃, 애니메이션 및 어두운 테마 지원을 제공합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Site Map</h2>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 1</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">About Us</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Services</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Contact</a></li>      </ul>    </div>    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 2</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Pricing</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Testimonials</a></li>      </ul>    </div>    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 3</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">FAQs</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Support</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Privacy Policy</a></li>      </ul>    </div>  </div>  <div class="mt-8">    <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Team</h3>    <div class="flex space-x-4 mt-2">      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic1/100/100" alt="Avatar" class="rounded-full">      </div>      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic2/100/100" alt="Avatar" class="rounded-full">      </div>      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic3/100/100" alt="Avatar" class="rounded-full">      </div>    </div>  </div></div>

사이트 맵 구성 요소

미니멀리스트/플랫 디자인, 반응형 효과 및 어두운 테마를 지원하는 사이트 맵 구성 요소.

미리보기 열기

                <footer class='bg-white dark:bg-gray-900'>
    <div class='mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8'>
        <div class='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Company</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>About Us</a>
                    <a href='#' class='hover:opacity-75'>Careers</a>
                    <a href='#' class='hover:opacity-75'>Contact Us</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Services</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Web Development</a>
                    <a href='#' class='hover:opacity-75'>Mobile Development</a>
                    <a href='#' class='hover:opacity-75'>SEO Optimization</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Legal</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Privacy Policy</a>
                    <a href='#' class='hover:opacity-75'>Terms of Service</a>
                    <a href='#' class='hover:opacity-75'>Cookie Policy</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Follow Us</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Facebook</a>
                    <a href='#' class='hover:opacity-75'>Twitter</a>
                    <a href='#' class='hover:opacity-75'>Instagram</a>
                </nav>
            </div>
        </div>
        <div class='mt-8 border-t border-gray-100 dark:border-gray-800 pt-8 sm:flex sm:items-center sm:justify-between'>
            <p class='text-xs/relaxed text-gray-500 dark:text-gray-400'>
                © 2024 Your Company. All rights reserved.
            </p>
        </div>
    </div>
</footer>

사이트 맵 구성 요소

반응형 디자인과 다크 모드를 지원하는 뉴모픽 사이트 맵 구성 요소입니다.

미리보기 열기

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Site Map</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 1</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 1</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 2</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 2</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link A</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link B</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link C</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 3</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page X</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Y</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Z</a></li>
      </ul>
    </div>
  </div>
</div>

사이트 맵 구성 요소

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

미리보기 열기

                <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>

사이트 맵 구성 요소

반응형 효과와 어두운 테마 지원을 특징으로 하는 레트로/빈티지 스타일의 사이트 맵 구성 요소입니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Site Map</h2>
    <ul class="space-y-4">
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Home</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">About Us</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Services</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Contact</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
    </ul>
</div>

사이트 맵 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 사이트 맵 구성요소로, 그리드 기반 레이아웃, 그림자, 다크 모드 지원을 제공합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-gray-700 transition duration-300">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Home</h3>
            <p class="text-gray-600 dark:text-gray-400">Welcome to our website!</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h3>
            <p class="text-gray-600 dark:text-gray-400">Learn more about our team.</p>
            <img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Services</h3>
            <p class="text-gray-600 dark:text-gray-400">What we offer to our clients.</p>
            <img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact</h3>
            <p class="text-gray-600 dark:text-gray-400">Reach out to us anytime.</p>
            <img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Blog</h3>
            <p class="text-gray-600 dark:text-gray-400">Read our latest articles.</p>
            <img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="mt-2 rounded-md">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">FAQ</h3>
            <p class="text-gray-600 dark:text-gray-400">Find answers to your questions.</p>
            <img src="https://picsum.photos/200/100?random=6" alt="FAQ Image" class="mt-2 rounded-md">
        </div>
    </div>
</div>

카테고리