CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Akkordeon-Komponente

Akkordeon-Komponente

Eine einfache, reaktionsschnelle Akkordeon-Komponente, die mit einem Glasmorphismus-Effekt und einem analogen Farbschema entworfen wurde und sich für die Präsentation von Arbeiten oder Produkten in einem Portfolio eignet.

Vorschau

HTML-Code 

<div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-md mx-auto">
    <h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white">My Portfolio</h2>
    <div class="mt-4">
        <div class="rounded-lg shadow-md overflow-hidden">
            <div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 1</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 1.</p>
            </div>
            <div class="bg-purple-100 dark:bg-purple-700 p-4 cursor-pointer hover:bg-purple-200 dark:hover:bg-purple-600 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 2</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 2.</p>
            </div>
            <div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 3</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 3.</p>
            </div>
        </div>
    </div>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg mb-2">
        <p class="text-gray-800 dark:text-white">Showcasing beautiful projects.</p>
    </div>
    <div class="mt-4 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>

Verwandte Komponenten

Akkordeon-Komponente

Akkordeonkomponente mit Materialdesign, Farbschema in Erdtönen, einfache Komplexität für E-Commerce, reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

Retro Armaturenbrett Akkordeon

Retro / Vintage Akkordeonkomponente für Armaturenbrett mit komplementärem Farbschema und komplexer Komplexität. Enthält Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS. Kein JavaScript. Bilder über picsum.photos und Avatare über randomuser.me.

Offen

Akkordeon-Komponente

Eine Akkordeonkomponente im 3D-Stil, die für Business-/Unternehmenswebsites mit Unterstützung für dunkle Themen entwickelt wurde.

Offen