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

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

Tailwind CSSを使用してダークモードで設計されたレスポンシブサイトマップコンポーネント。

プレビュー

HTMLコード

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

関連コンポーネント

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

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

開ける

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

マテリアルデザインの美学、パステルカラーの配色、ダークモードのサポートを備えたレスポンシブサイトマップコンポーネントで、デート/ソーシャルプラットフォームに適しています。

開ける

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

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

開ける