CCHub Logo CCHub Tailwind Collection
コンポーネント サイトマップ サイトマップコンポーネント

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

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

プレビュー

HTMLコード 

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

関連コンポーネント

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

ソーシャルメディアインターフェース用に設計されたレトロ/ビンテージサイトマップコンポーネントで、単色の配色を使用しています。読みやすさと美的魅力を高めるために、ダークテーマのシンプルなレイアウトが特徴です。

開ける

Neon_Glow_Sports_Sitemap_Component

ネオン/グロー効果と高コントラストの色を備えたシンプルでレスポンシブなサイトマップコンポーネントで、スポーツ/フィットネスアプリケーション向けに調整されています。ダークモードのサポートが含まれています。

開ける

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

ポートフォリオ用のシンプルで鮮やかな 3D にインスパイアされたサイト マップ コンポーネントで、レスポンシブ デザインと Tailwind CSS を使用したダーク モードのサポートを備えています。

開ける