Компоненты Аккордеон Аккордеон в социальных сетях

Аккордеон в социальных сетях

Адаптивный компонент-аккордеон с поддержкой темной темы для интерфейсов социальных сетей, использующий принципы Material Design, триадическую цветовую схему и простую верстку. Никакого JavaScript, только HTML с CSS-классами Tailwind. Стили темного режима включаются с использованием префикса dark:.

Предварительный просмотр

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>

Связанные компоненты

Компонент «Аккордеон»

Компонент аккордеона с 3D-дизайном, адаптивными эффектами и поддержкой темной темы с использованием только HTML и CSS (Tailwind CSS). Компонент использует CSS для темного режима и включает переходы для плавных аккордеонов. Он полностью адаптивный. JavaScript не используется.

Открытый

Neon_Glow_Sepia_Photography_Accordion

Сложный, отзывчивый компонент гармошки с эффектом неона/свечения в оттенках сепии/коричневого, предназначенный для портфолио фотографий, с интерактивными элементами и поддержкой темного режима.

Открытый

Компонент «Аккордеон»

Компонент-аккордеон с дизайном Neumorphism, отзывчивыми эффектами и поддержкой темных тем.

Открытый