Méga Menu

Composant Mega Menu

Composant de méga menu avec interface utilisateur en mode sombre, schéma de couleurs analogue et complexité complexe à des fins de tableau de bord, à l’aide de Tailwind CSS. Il doit être réactif et prendre en charge le thème sombre en utilisant le préfixe Tailwind dark :. Aucun code JavaScript n’est nécessaire, HTML avec les classes Tailwind uniquement. Les images proviennent de picsum.photos et les avatars de randomuser.me.

Ouvrir l’aperçu

                <nav class="relative bg-[#1a202c] dark:bg-[#0e131d] shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex-shrink-0 flex items-center">
                    <a href="#" class="text-white text-2xl font-bold">Dashboard</a>
                </div>
                <div class="hidden md:ml-6 md:flex md:space-x-8">
                    <a href="#" class="border-b-2 border-indigo-500 text-white dark:text-gray-300 px-3 py-2 text-sm font-medium">Home</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Analytics</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Reports</a>
                    <div class="relative group">
                        <button class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium flex items-center">
                            Products
                            <svg class="ml-2 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <div class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 hidden group-hover:block">
                            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                                <div class="relative grid gap-6 bg-gray-800 dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 20v-3m0 0l-1.673-1.673M12 17l1.673-1.673M11 10V6m0 0L8.327 7.673M11 6l1.673 1.673m-1.673 4h4.673" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product A</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product A.</p>
                                        </div>
                                    </a>
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product B</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product B.</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden md:ml-6 md:flex md:items-center">
                <button class="bg-gray-700 dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
                <div class="ml-3 relative">
                    <div>
                        <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                            <span class="sr-only">Open user menu</span>
                            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                        </button>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <!-- Mobile menu button -->
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!--
                        Icon when menu is closed.

                        Heroicon name: outline/menu

                        Menu open: "hidden", Menu closed: "block"
                    -->
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!--
                        Icon when menu is open.

                        Heroicon name: outline/x

                        Menu open: "block", Menu closed: "hidden"
                    -->
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
        </div>
        <div class="pt-4 pb-3 border-t border-gray-700">
            <div class="flex items-center px-5">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                </div>
                <div class="ml-3">
                    <div class="text-base font-medium text-white">John Doe</div>
                    <div class="text-sm font-medium text-gray-400">[email protected]</div>
                </div>
                <button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
            </div>
            <div class="mt-3 px-2 space-y-1">
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
            </div>
        </div>
    </div>
</nav>

Composant Mega Menu

Un composant de méga menu e-commerce simple et sombre avec une palette de couleurs en niveaux de gris, construit à l’aide de Tailwind CSS. Il est réactif et inclut la prise en charge du thème sombre à l’aide du préfixe dark : de Tailwind.

Ouvrir l’aperçu

                <nav class="bg-gray-950 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">ShopName</a>
    <div class="hidden md:flex space-x-6">
      <div class="relative group">
        <button class="hover:text-gray-300">Categories</button>
        <div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
          <a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-gray-300">Sales</a>
      <a href="#" class="hover:text-gray-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Composant Mega Menu

Un composant de méga menu réactif conçu dans l’interface utilisateur du mode sombre avec une palette de couleurs en niveaux de gris pour les interfaces de médias sociaux.

Ouvrir l’aperçu

                <div class="bg-gray-900 text-white p-5">
    <div class="container mx-auto">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-bold">Social Media</h1>
            <nav class="hidden md:flex space-x-4">
                <a href="#" class="hover:underline">Home</a>
                <a href="#" class="hover:underline">Profile</a>
                <a href="#" class="hover:underline">Messages</a>
                <a href="#" class="hover:underline">Settings</a>
            </nav>
            <div class="md:hidden cursor-pointer">
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white"></span>
            </div>
        </div>
        <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 1" class="rounded-lg mb-3">
                <p class="text-center">Title 1</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 2" class="rounded-lg mb-3">
                <p class="text-center">Title 2</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 3" class="rounded-lg mb-3">
                <p class="text-center">Title 3</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-gray-800 text-gray-300 p-5">
    <div class="container mx-auto">
        <h2 class="text-lg font-semibold">User Profiles</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 1</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 2</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User 3" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 3</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User 4" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 4</p>
            </div>
        </div>
    </div>
</div>

Composant Mega Menu

Méga composant de menu avec un design minimaliste / plat, une palette de couleurs vives, un niveau de complexité complexe, à des fins de tableau de bord, en utilisant Tailwind CSS. Conception réactive avec prise en charge du thème sombre. Pas de code JavaScript, seulement du HTML avec des classes Tailwind. Le mode sombre utilise le préfixe dark : de Tailwind pour le coiffage. Les images utilisent picsum.photos et randomuser.me pour les avatars.

Ouvrir l’aperçu

                <nav class="bg-white shadow-lg dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
            <div>
                <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
            </div>
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Home</a>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Products</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
                    </div>
                </div>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Services</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
                    </div>
                </div>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">About</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Contact</a>
            </div>
            <div class="md:hidden flex items-center">
                <button class="mobile-menu-button">
                    <svg class="w-6 h-6 text-gray-500 hover:text-green-500 dark:text-gray-200 dark:hover:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="mobile-menu hidden md:hidden bg-white dark:bg-gray-800">
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Home</a>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Products</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
            </div>
        </div>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Services</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
            </div>
        </div>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Contact</a>
    </div>
</nav>

Composant Mega Menu

Un composant de méga menu de style Neumorphisme avec une palette de couleurs monochromatiques conçu pour les blogs et la consommation de contenu. Il prend en charge la conception réactive avec le mode sombre.

Ouvrir l’aperçu

                <header class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <nav class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-8">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">About</a>
        <div class="relative group">
          <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 transition">Categories</button>
          <div class="absolute left-0 z-10 hidden w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg group-hover:block">
            <ul class="py-2">
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Web Development</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Design</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Marketing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="hidden md:block">
      <a href="#" class="relative inline-block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
      </a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
        <!-- Hamburger icon -->
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</header>

<main class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Posts</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=1" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=2" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=3" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=4" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 4</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
  </div>
</main>

Composant Mega Menu

Un composant Mega Menu réactif conçu pour la consommation de blogs/contenu, avec des micro-interactions et un accent sur les couleurs de terre, avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 relative group">
    <div class="container mx-auto p-4">
        <nav class="flex justify-between items-center">
            <div class="text-2xl font-semibold text-brown-600 dark:text-green-200">
                Blog Title
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Home</a>
                <a href="#" class="relative transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Categories
                    <div class="absolute inset-x-0 bottom-0 h-0.5 bg-brown-600 dark:bg-green-200 transition duration-300 ease-in-out transform scale-x-0 group-hover:scale-x-100"></div>
                </a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">About</a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-brown-600 dark:text-green-200 focus:outline-none">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </nav>
    </div>
    <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 w-full rounded-lg overflow-hidden transition-opacity duration-300 ease-in-out">
        <div class="container mx-auto p-6">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Latest Posts</h2>
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 1" class="h-10 w-10 rounded-full">
                                <span>Understanding Earth Tones in Design</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 2" class="h-10 w-10 rounded-full">
                                <span>The Beauty of Nature-Inspired Living</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Categories</h2>
                    <ul class="space-y-2">
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Lifestyle</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Travel</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Food</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Wellness</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Glassmorphism Mega Menu Component

Glassmorphism Mega Menu pour les interfaces de tableau de bord avec palette de couleurs triadique. Dispose d’un effet de verre givré, d’un design réactif et d’une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <nav class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white py-4 px-6 sticky top-0 z-50 dark:bg-black dark:bg-opacity-30">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-xl font-bold text-blue-600 dark:text-blue-400">Dashboard</a>
        <div class="hidden md:flex space-x-6">
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Data</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Overview</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Reports</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Analytics</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Trends</a>
                    </div>
                </div>
            </div>
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Management</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Users</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Permissions</a>
                    </div>
                </div>
            </div>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Help</a>
        </div>
        <button class="md:hidden text-gray-800 dark:text-gray-200 focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
    </div>
    <div class="hidden md:hidden mobile-menu">
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Data</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Management</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Help</a>
    </div>
</nav>

Composant Mega Menu

Un composant de méga menu réactif conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris pour les sites Web d’entreprise et d’entreprise. Il prend en charge le thème sombre et utilise Tailwind CSS pour le style.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=1" alt="Service 1" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Consulting</h3>
            <p class="text-gray-600 dark:text-gray-400">Professional consulting services to help you grow.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Service 2" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Marketing</h3>
            <p class="text-gray-600 dark:text-gray-400">Effective marketing strategies tailored to your needs.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Service 3" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Support</h3>
            <p class="text-gray-600 dark:text-gray-400">24/7 support to assist with your queries.</p>
        </div>
    </div>
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mt-8">About Us</h2>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
        <p class="text-gray-600 dark:text-gray-400">Our team is dedicated to providing exceptional service and value.</p>
    </div>
</div>

Composant Mega Menu

Un composant de méga menu de style neumorphique pour un site de portfolio, conçu avec un schéma de couleurs en niveaux de gris et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-shadow duration-300">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
        <button class="bg-gray-200 dark:bg-gray-700 rounded-full p-2 shadow-md transition-shadow duration-300 hover:shadow-lg dark:hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-8 h-8 rounded-full">
        </button>
    </div>
    <nav class="mt-6">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">About</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Projects</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/150" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/150?random=1" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/150?random=2" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
        </div>
    </div>
</div>

Skeuomorphisme Médias sociaux Mega Menu

Méga composant de menu avec conception Skeuomorphism, schéma de couleurs triadique et complexité simple à des fins de médias sociaux. Réactif avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="text-gray-800 dark:text-white text-xl font-bold">SocialHub</div>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Feed</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-300">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300">Messages</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300">Notifications</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Catégories