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

Tailwind CSSで設計されたレスポンシブなMega Menuコンポーネントで、魅力的なアニメーションとダークテーマのサポートのためのマイクロインタラクションを備えています。

プレビュー

HTMLコード

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="flex justify-between items-center">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Mega Menu</h2>
        <button class="focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-lg transition ease-in-out duration-300">Menu</button>
    </div>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 1</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=1" alt="Category 1" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 2</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=2" alt="Category 2" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 3</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=3" alt="Category 3" class="mt-4 rounded-lg w-full">
        </div>
    </div>
    <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
        <h4 class="font-semibold text-gray-900 dark:text-white">Follow Us</h4>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-8 h-8 rounded-full">
                <span>Profile 1</span>
            </a>
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-8 h-8 rounded-full">
                <span>Profile 2</span>
            </a>
        </div>
    </div>
</div>

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

プレビュー

HTMLコード

関連コンポーネント

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

シンプルなダークモードメガメニュー

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