CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Retro Vintage Akkordeon Komponente

Retro Vintage Akkordeon Komponente

Eine Akkordeonkomponente im Retro-/Vintage-Stil mit Erdtönen für die Visualisierung von Dashboard-Daten. Entwickelt für mittlere Komplexität mit Unterstützung für reaktionsschnelle und dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg text-brown-700 dark:text-brown-300 font-bold mb-4">Dashboard</h2>
    <div class="accordion space-y-4">
        <!-- Accordion Item 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 1</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-yellow-200 dark:bg-yellow-600 hidden">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 1, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 2 -->
        <div class="bg-green-300 dark:bg-green-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 2</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-green-200 dark:bg-green-600 hidden">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 2, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 3 -->
        <div class="bg-red-300 dark:bg-red-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 3</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-red-200 dark:bg-red-600 hidden">
                <img src="https://picsum.photos/300/200?random=3" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 3, providing insights and details.</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

RetroAkkordeonEinfach

Eine einfache, reaktionsschnelle Akkordeonkomponente im Retro-Stil für Unternehmenswebsites mit Unterstützung für den Dunkelmodus mit Tailwind CSS. Diese Komponente verwendet ein triadisches Farbschema und benötigt kein JavaScript.

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

Dark Mode Accordion Component mit Farbschema in Erdtönen, mäßiger Komplexität, für Social-Media-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen. Kein JavaScript.

Offen