CCHub Logo CCHub Tailwind Collection
Komponenten Layout-Komponenten 3D-Layout-Komponente

3D-Layout-Komponente

Ein einfaches, reaktionsschnelles und ansprechendes 3D-Design-Layout für Geschäfts-/Unternehmenswebsites mit leuchtenden Farben und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden md:flex md:flex-row">
    <div class="md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our Company</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">We provide innovative solutions to enhance your business.</p>
        <a href="#" class="bg-indigo-600 text-white rounded-lg px-4 py-2 hover:bg-indigo-700 transition duration-300 shadow-md transform hover:scale-105">Learn More</a>
    </div>
    <div class="md:w-1/2">
        <img src="https://picsum.photos/500/300" alt="Business Image" class="rounded-lg shadow-md w-full h-full object-cover" />
    </div>
</div>

<div class="flex justify-center mt-6">
    <div class="text-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Our Team</h3>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar 2" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar 3" class="rounded-full w-16 h-16 shadow-lg" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Meet our dedicated team of professionals.</p>
    </div>
</div>

Verwandte Komponenten

Social-Media-Layout-Komponente

Eine reaktionsschnelle und komplexe, von 3D inspirierte Social-Media-Layout-Komponente mit lebendigen Farben und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es enthält eine Kopfzeile mit Logo und Navigation, einen Hauptinhaltsbereich mit dynamischen Karten für Beiträge und eine Seitenleiste für Benutzerprofile und Trendthemen. Jedes Element ist so gestaltet, dass es ein Gefühl von Tiefe und Interaktion vermittelt.

Offen

Retro-Layout für soziale Medien

Ein einfaches, monochromes Retro-Layout für soziale Medien mit Unterstützung für den Dunkelmodus.

Offen

Layout-Komponente im Dunkelmodus

Eine reaktionsschnelle Layoutkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verfügt über eine einfache Kopfzeile, einen Inhaltsbereich und eine Fußzeile. Der Dunkelmodus wird in Tailwind-Klassen durch das Präfix 'dark:' behandelt.

Offen