Composants Méga Menu Composant Mega Menu

Composant Mega Menu

Un composant de méga menu réactif conçu avec un look 3D, y compris des effets de profondeur et la prise en charge du thème sombre à l’aide de Tailwind CSS. Le composant présente des images et des avatars d’utilisateurs provenant de services d’espace réservé.

Aperçu

HTML Code

<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mega Menu</div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            Menu
        </button>
    </div>
    <div class="grid grid-cols-3 gap-4 p-4">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=3" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 3.</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">User Profiles</h4>
        <div class="flex flex-wrap">
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

Composants associés

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

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

Composant Mega Menu

Composant Mega Menu avec prise en charge du mode sombre

Ouvrir