RetroAccordionSimple
Простой, отзывчивый, ретро-тематический аккордеонный компонент для бизнес-сайтов с поддержкой темного режима с использованием Tailwind CSS. Этот компонент использует триадическую цветовую схему и не требует JavaScript.
HTML-код
<div x-data="{ open: false }" class="border border-gray-300 dark:border-gray-700 rounded-lg mb-4">
<button @click="open = !open" class="w-full flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none">
<span class="font-bold">Accordion Title</span>
<svg class="w-5 h-5 transform transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div x-show="open" class="p-4 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300">
<p>Accordion content goes here. This is a simple example with basic styling.</p>
</div>
</div>Связанные компоненты
Компонент «Аккордеон»
Адаптивный компонент аккордеона с поддержкой темных тем, монохроматической цветовой схемой и микровзаимодействиями для веб-сайта-портфолио.
Дизайн материала Аккордеон
Аккордеон Material Design для электронной коммерции с дополнительной цветовой гаммой и поддержкой темной темы.
Компонент «Аккордеон»
Компонент гармошки Glassmorphism с яркими цветами для социальных сетей, полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия, богатым интерфейсом с множеством интерактивных элементов, адаптивным дизайном и поддержкой темных тем. Код JavaScript не нужен, только HTML с классами Tailwind.