Componentes Acordeón Acordeón de Redes Sociales

Acordeón de Redes Sociales

Componente de acordeón responsivo con soporte de tema oscuro para interfaces de redes sociales, utilizando principios de diseño de materiales, un esquema de color triádico y un diseño simple. Sin JavaScript, solo HTML con clases CSS de Tailwind. Los estilos de modo oscuro se incluyen con el prefijo dark:.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de acordeón con diseño minimalista en tonos pastel

Un componente de acordeón complejo, receptivo y compatible con temas oscuros para portafolios, diseñado con una estética pastel minimalista / plana utilizando Tailwind CSS. Incluye múltiples elementos interactivos y utiliza picsum.photos para las imágenes.

Abrir

RetroAccordianWithEarthTones

Componente de acordeón retro/vintage con tonos tierra, complejidad moderada, diseño responsivo y soporte de temas oscuros para fines de portafolio.

Abrir

Componente de noticias de acordeón industrial

Un componente de acordeón de estilo industrial para sitios web de noticias y periodismo, con elementos expuestos, texturas metálicas y una paleta de colores otoñales. Es responsivo, diseñado para múltiples elementos interactivos e incluye soporte para modo oscuro.

Abrir