Компонент «Аккордеон»
Компонент аккордеона в темном режиме с цветовой гаммой земляных тонов, средней сложности, для социальных сетей, с адаптивным дизайном и поддержкой темных тем. Нет JavaScript.
HTML-код
<div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
<div class="accordion">
<div class="accordion-item">
<input type="checkbox" id="accordion1" class="hidden">
<label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
Section 1
<svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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>
</label>
<div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
<p>Content for section 1.</p>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" id="accordion2" class="hidden">
<label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
Section 2
<svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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>
</label>
<div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
<p>Content for section 2.</p>
</div>
</div>
</div>
</div>
<style>
.accordion-item input:checked ~ label svg {
transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
display: block;
}
</style>Связанные компоненты
Компонент «Аккордеон»
Компонент гармошки Glassmorphism с яркими цветами для социальных сетей, полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия, богатым интерфейсом с множеством интерактивных элементов, адаптивным дизайном и поддержкой темных тем. Код JavaScript не нужен, только HTML с классами Tailwind.
Компонент нейроморфного аккордеона
Компонент Neumorphic Accordion с триадической цветовой схемой, подходящий для бизнес-сайтов. Он отличается адаптивным дизайном с поддержкой темного режима, реализованным исключительно с помощью HTML и Tailwind CSS.
Neon_Glow_Sepia_Photography_Accordion
Сложный, отзывчивый компонент гармошки с эффектом неона/свечения в оттенках сепии/коричневого, предназначенный для портфолио фотографий, с интерактивными элементами и поддержкой темного режима.