Composants Accordéon Accordéon des médias sociaux

Accordéon des médias sociaux

Prise en charge des interfaces de médias sociaux, en utilisant les principes de conception matérielle, une palette de couleurs triadique et une mise en page simple. Pas de JavaScript, seulement du HTML avec des classes CSS Tailwind. Les styles du mode sombre sont inclus à l’aide du préfixe dark :.

Aperçu

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>

Composants associés

Composant accordéon

Composant accordéon avec conception matérielle, palette de couleurs Earth Tones, complexité simple pour le commerce électronique, réactif avec prise en charge du thème sombre.

Ouvrir

RétroAccordianWithEarthTones

Composant accordéon rétro/vintage avec des tons de terre, une complexité modérée, un design réactif et une prise en charge du thème sombre à des fins de portefeuille.

Ouvrir

Tableau de bord rétro accordéon

Composant d’accordéon rétro / vintage pour tableau de bord avec palette de couleurs complémentaires et complexité complexe. Comprend un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript. Images via picsum.photos et avatars via randomuser.me.

Ouvrir