サイトマップ

サイトマップコンポーネント

鮮やかな色とマイクロインタラクション、ダークモードのサポートを備えた、eコマースサイト向けのシンプルでレスポンシブなサイトマップコンポーネント。

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

カテゴリ