CCHub Logo CCHub Tailwind Collection
Komponenten Mega-Menü Mega-Menü-Komponente

Mega-Menü-Komponente

Eine reaktionsschnelle Mega-Menü-Komponente, die in einem skeuomorphen Stil mit einem Graustufen-Farbschema für Geschäfts- und Unternehmenswebsites gestaltet ist. Es unterstützt ein dunkles Design und verwendet Tailwind CSS für das Styling.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Mega-Menü-Komponente

Eine reaktionsschnelle Mega-Menü-Komponente, die mit Tailwind CSS entwickelt wurde, mit Mikrointeraktionen für ansprechende Animationen und Unterstützung für dunkle Themen.

Offen

Mega-Menü-Komponente

Eine reaktionsschnelle Mega Menu-Komponente, die für den Konsum von Blogs/Inhalten entwickelt wurde, mit Mikrointeraktionen und einem Fokus auf Erdtönen, mit Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Glassmorphism Mega Menü-Komponente

Glassmorphism Mega Menu für Dashboard-Schnittstellen mit triadischem Farbschema. Verfügt über einen Milchglaseffekt, responsives Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen