CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Akkordeon für soziale Medien

Akkordeon für soziale Medien

Responsive Accordion-Komponente mit dunklem Theme Unterstützung für Social-Media-Schnittstellen unter Verwendung von Material Design-Prinzipien, einem triadischen Farbschema und einem einfachen Layout. Kein JavaScript, nur HTML mit Tailwind CSS-Klassen. Stile im dunklen Modus werden mit dem Präfix dark: eingeschlossen.

Vorschau

HTML-Code 

<div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 1</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 1. It provides additional information or details related to the title. The design is simple and follows Material Design principles with subtle shadows and rounded corners.</p>
            </div>
        </div>
    </div>
</div>

<div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 2</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 2. You can add more text, images, or other HTML elements here. The triadic color scheme is subtly applied through text and background colors that are somewhat evenly spaced on the color wheel, like various shades of grey/stone which could be paired with other triadic colors like orange and green in a larger layout.</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

NonProfit_Retro_Accordion

Eine komplexe Akkordeonkomponente im Retro-Stil, die für gemeinnützige/wohltätige Websites entwickelt wurde, mit gedämpften Farbverläufen, sanften Übergängen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

RetroAccordianWithEarthTones

Retro/Vintage-Akkordeonkomponente mit Erdtönen, moderater Komplexität, responsivem Design und Unterstützung für dunkle Themen für Portfoliozwecke.

Offen

Akkordeon-Komponente

Eine interaktive Akkordeonkomponente für Food-/Restaurant-Websites mit Farbverläufen, sanften Übergängen und Unterstützung für den Dunkelmodus. Entwickelt, um reaktionsschnell zu sein und eine reichhaltige Benutzeroberfläche zu bieten.

Offen