CCHub Logo CCHub Tailwind Collection
コンポーネント メガメニュー ブルータリズムメガメニュー

ブルータリズムメガメニュー

ブルータリズムデザインのレスポンシブメガメニューコンポーネントで、アースカラーとブログやコンテンツ駆動型のWebサイト向けのダークモードのサポートが特徴です。

プレビュー

HTMLコード 

<div class="bg-brown-900 dark:bg-gray-800 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-white text-2xl font-bold">Blog</div>
            <nav class="mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row space-x-0 md:space-x-8">
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Home</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">About</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Categories</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=1" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 1</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=2" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 2</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=3" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 3</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
        </div>
    </div>
</div>

関連コンポーネント

メガメニューコンポーネント

モノスペース/開発者の美学と温かみのあるニュートラルな配色で設計された複雑で応答性の高いメガメニューコンポーネントで、専門的なコンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。

開ける

Brutalist_Triadic_Simple_Mega_Menu

ブログやコンテンツサイト向けにデザインされたシンプルなブルータリズムスタイルのメガメニューで、トライアドの配色とダークモードに対応した完全な応答性が特徴です。

開ける

ブルータリズムEコマースメガメニュー

eコマース向けの複雑でブルータリズムスタイルのメガメニューは、ハイコントラストとプロフェッショナルなブルートーンが特徴です。ダークモードのサポートで完全にレスポンシブ。

開ける