CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Inhaltsanzeige Komponente "Inhaltsanzeige"

Komponente "Inhaltsanzeige"

Eine Inhaltsanzeigekomponente im 3D-Stil, die Portfolioarbeiten oder Produkte mit einem Graustufen-Farbschema und responsivem Design einschließlich Unterstützung des Dunkelmodus präsentiert.

Vorschau

HTML-Code 

<div class="max-w-4xl mx-auto p-6">
    <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 5</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 6</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Komponenten für die Inhaltsanzeige"

Eine reaktionsschnelle Komponente zur Anzeige von Inhalten, die für Geschäfts-/Unternehmenswebsites mit Unterstützung des Dunkelmodus und einem lebendigen Farbschema entwickelt wurde. Es enthält Abschnitte für Benutzer-Avatare, Textinhalte und Bilder.

Offen

Industrial_3D_Content_Display

Eine einfache, reaktionsschnelle Komponente zur Anzeige von Inhalten für Fertigungs-/Industrieunternehmen mit einem subtilen 3D-Design mit gedämpften Farben und Unterstützung des Dunkelmodus.

Offen

Memphis_Content_Display_Component

Eine komplexe, reaktionsschnelle Content-Display-Komponente für Unterhaltungs-/Medienplattformen im Memphis-Design-Stil mit einem Schwarz-Weiß-Farbschema und einer hellen Akzentfarbe (Fuchsia). Enthält Unterstützung für den Dunkelmodus und Platzhalterbilder.

Offen