Rechercher des composants

Catégories

Composants Méga Menu

Méga Menu

Grand panneau déroulant affichant plusieurs options de navigation

Composant Mega Menu

Un composant de méga menu minimaliste conçu pour présenter des travaux ou des produits avec un support à thème sombre.

                <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-screen-xl mx-auto px-4 py-2 flex justify-between items-center">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
        <div class="relative">
            <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
                Menu
            </button>
            <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg mt-2 transition-opacity ease-in-out duration-200">
                <div class="grid grid-cols-3 gap-4 p-4">
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 1</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 2</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">More</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-screen-xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Featured Works</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Work 1">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Work 2">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Work 3">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Composant Mega Menu avec style Neumorphisme pour le site Web de blog/contenu, utilisant un schéma de couleurs analogue et une complexité modérée. Conception réactive avec prise en charge du thème sombre. Pas de JavaScript.

Ouvrir Aperçu

                <nav class="bg-gray-200 dark:bg-gray-800 transition-colors duration-300 ease-in-out">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Name</span>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Home</a>
                        <div class="relative group">
                            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Categories</button>
                            <div class="absolute z-10 left-0 mt-2 w-60 bg-gray-200 dark:bg-gray-700 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 ease-in-out neu">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Technology</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Travel</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Food</a>
                            </div>
                        </div>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">About</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Contact</a>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 neu neu-pressed">
                    <span class="sr-only">Open main menu</span>
                    <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 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Home</a>
            <div class="group">
                <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left neu neu-pressed">Categories</button>
                <div class="pl-4 mt-2 space-y-1">
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Technology</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Travel</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Food</a>
                </div>
            </div>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Contact</a>
        </div>
    </div>

    <style>
        .neu {
            box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
        }
        .dark .neu {
            box-shadow: 5px 5px 10px #4b4b4b, -5px -5px 10px #333333;
        }
        .neu-pressed {
             box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
        }
        .dark .neu-pressed {
            box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
        }
    </style>
</nav>

Méga Menu en mode sombre simple

Un composant de méga-menu simple et réactif pour les sites Web d’entreprise utilisant le mode sombre avec une palette de couleurs complémentaire. Construit avec Tailwind CSS, avec prise en charge du thème sombre et sans JavaScript.

Ouvrir Aperçu

                <header class="bg-gray-900 text-gray-300">
  <nav class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <a href="#" class="text-xl font-bold text-white">Your Logo</a>
      <div class="hidden md:flex space-x-8">
        <div class="relative group">
          <button class="hover:text-white">Menu 1</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category 1</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link 1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category 2</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link A</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link B</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link C</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="relative group">
          <button class="hover:text-white">Menu 2</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category X</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link X1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category Y</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link Y1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y3</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="hover:text-white">About</a>
        <a href="#" class="hover:text-white">Contact</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-300 hover:text-white focus:outline-none">
          <svg class="h-6 w-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"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
</header>

Composant Mega Menu

Composant Mega Menu avec style Glassmorphism, palette de couleurs monochromatique, niveau de complexité complexe, à des fins de tableau de bord. Conception réactive avec prise en charge du thème sombre. Utilise Tailwind CSS. Aucun code JavaScript n’est nécessaire.

Ouvrir Aperçu

                <div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-700 text-white dark:bg-gray-800 dark:bg-opacity-30 p-6 rounded-lg shadow-xl w-full max-w-6xl mx-auto mt-10">
  <div class="flex justify-between items-center border-b border-gray-600 dark:border-gray-700 pb-4">
    <h2 class="text-2xl font-semibold">Dashboard Navigation</h2>
    <button class="text-gray-300 hover:text-white focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
  <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Overview</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Dashboard Home</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Analytics</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Reporting</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Management</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Users</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Settings</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Permissions</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Projects</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Active Projects</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Archived Projects</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Add New Project</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Support</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6 border-t border-gray-600 dark:border-gray-700 pt-4 flex justify-between items-center">
    <div>
      <p class="text-gray-400 text-sm">Last updated: Today</p>
    </div>
    <div>
      <img class="h-8 w-8 rounded-full ring-2 ring-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
  </div>
</div>

Composant Mega Menu

Méga composant de menu avec conception matérielle, schéma de couleurs triadique, niveau complexe, à des fins de tableau de bord, réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <nav class="bg-gray-100 dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div>
        <a href="#" class="text-gray-800 dark:text-white text-xl font-bold">Dashboard</a>
      </div>
      <div class="hidden md:flex space-x-4">
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Analytics</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Overview</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Reports</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Data Sources</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Users</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Manage Users</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Roles & Permissions</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Settings</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">General Settings</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Billing</a>
          </div>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-800 dark: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>
  </div>
</nav>

Composant Mega Menu

Méga menu CSS réactif avec conception 3D, schéma de couleurs analogue et prise en charge du mode sombre

Ouvrir Aperçu

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 shadow-xl">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-white text-2xl font-bold">BlogName</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-white hover:text-gray-200 transition duration-300">Categories</button>
        <div class="absolute z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-6 mt-2 transition duration-300 transform translate-y-2 opacity-0 group-hover:opacity-100 group-hover:translate-y-0" style="perspective: 1000px;">
          <div class="grid grid-cols-2 gap-4" style="transform: rotateY(0deg);">
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
            </div>
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-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 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <div class="mobile-menu hidden md:hidden bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 py-4 px-4">
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Home</a>
    <div class="relative group">
      <button class="block text-white hover:text-gray-200 transition duration-300 py-2">Categories</button>
      <div class="relative z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-4 mt-2 transition duration-300">
        <div class="grid grid-cols-1 gap-2">
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
        </div>
      </div>
    </div>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">About</a>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Contact</a>
  </div>
</nav>

Composant Mega Menu

Un composant de méga menu avec un style de design brutaliste, avec une palette de couleurs monochromatiques et un design réactif adapté à un blog ou à une plate-forme de contenu.

Ouvrir Aperçu

                <div class="bg-gray-900 text-gray-100 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-3xl font-bold">My Blog</h1>
    <button class="text-gray-100 hover:text-gray-300">Menu</button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 1</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 2</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 3</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-8 flex justify-evenly">
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
  </div>
  <div class="text-center mt-4">
    <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
  </div>
</div>

Méga Menu brutaliste

Un méga composant de menu réactif avec un design brutaliste, avec des tons de terre et la prise en charge du mode sombre pour un blog ou un site Web axé sur le contenu.

Ouvrir Aperçu

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

Composant Mega Menu

Composant Mega Menu avec prise en charge du mode sombre

Ouvrir Aperçu

                <nav class="bg-gray-900 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <a href="#" class="text-white text-xl font-bold">Logo</a>
            <div class="hidden md:flex md:items-center md:space-x-4">
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
                <div class="relative group">
                    <button class="text-gray-300 hover:text-white transition duration-300">Products</button>
                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 shadow-lg mt-2 rounded-md">
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 3</a>
                    </div>
                </div>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">About</a>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-gray-300 hover:text-white 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-4 6h4"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

Méga Menu Rétro

Un méga composant de menu de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, mis en œuvre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus. Le mode sombre est géré uniquement avec CSS.

Ouvrir Aperçu

                <'nav' class="bg-gray-800 text-retro-yellow font-retro-sans">
  <'div' class="container mx-auto px-4 sm:px-6 lg:px-8">
    <'div' class="flex items-center justify-between h-16">
      <'div' class="flex items-center">
        <'div' class="flex-shrink-0">
          <'h1' class="text-2xl font-bold">RetroShop<'/h1'>
        <'/div'>
        <'div' class="hidden md:block">
          <'div' class="ml-10 flex items-baseline space-x-4">
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home<'/a'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Products<'/a'>
            <'div' class="relative group">
              <'button' class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium focus:outline-none">Categories <'/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 invisible group-hover:visible">
                <'div' class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                  <'div' class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro1/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Electronics<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro2/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Apparel<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro3/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Home Goods<'/p'>
                      <'/div'>
                    <'/a'>
                  <'/div'>
                <'/div'>
              <'/div'>
            <'/div'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact<'/a'>
          <'/div'>
        <'/div'>
      <'/div'>
      <'div' class="-mr-2 flex md:hidden">
        <'button' type="button" class="bg-gray-800 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-offset-2 focus:ring-offset-gray-800 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' stroke-linecap="round" stroke-linejoin="round" stroke-width="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' stroke-linecap="round" stroke-linejoin="round" stroke-width="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="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home<'/a'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Products<'/a'>
      <'div' class="group">
        <'button' class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium w-full text-left focus:outline-none">Categories <'/button'>
        <'div' class="pt-2 pb-3 space-y-1 px-5 invisible group-focus:visible">
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Electronics<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Apparel<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home Goods<'/a'>
        <'/div'>
      <'/div'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact<'/a'>
    <'/div'>
  <'/div'>
<'/nav'>