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

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

Tailwind CSS を使用してマテリアル デザインの原則に基づいて設計されたサイト マップ コンポーネントで、レスポンシブ レイアウト、アニメーション、ダーク テーマのサポートが特徴です。

プレビュー

HTMLコード

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

関連コンポーネント

Neumorphic_Industrial_Sitemap

工業および製造企業向けのレスポンシブなニューモーフィックサイトマップコンポーネントで、単色の配色とダークモードのサポートが特徴です。要素は、微妙な影を使用して背景から押し出されているように見えます。

開ける

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

ブルータリズムスタイルでデザインされたレスポンシブサイトマップコンポーネントで、ビジネス/企業のWebサイト向けのダークテーマで、インタラクティブ機能が組み込まれています。

開ける

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

glassmorphismで設計されたレスポンシブサイトマップコンポーネントで、すりガラスのような半透明の効果とぼかしを特徴とし、作品や製品を紹介するポートフォリオを実現します。ダークテーマをサポートし、適度な複雑さを維持しながら補色を利用します。

開ける