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

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

ミニマリスト/フラットデザイン、レスポンシブエフェクト、ダークテーマのサポートを備えたサイトマップコンポーネント。

プレビュー

HTMLコード 

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

関連コンポーネント

Neumorphic Site Map コンポーネント

宝石のような色調のニューモーフィック スタイルで設計された複雑で応答性の高いサイト マップ コンポーネントで、ダーク モードのサポートなど、政府や公共サービスの Web サイトに適しています。

開ける

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

glassmorphism デザイン、類似の配色、およびダーク モードのサポートを備えたレスポンシブ サイト マップ コンポーネントで、ビジネスや企業の Web サイトに適しています。

開ける

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

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

開ける