Компонент «Аккордеон»
Компонент-аккордеон с дизайном Neumorphism, отзывчивыми эффектами и поддержкой темных тем.
HTML-код
<div class="max-w-md mx-auto p-8">
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
</div>
</div>
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
</div>
</div>
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>Связанные компоненты
Ретро винтажный компонент аккордеона
Компонент-аккордеон в стиле ретро/винтаж с земляными тонами для визуализации данных на приборной панели. Предназначен для средней сложности с адаптивной и поддержкой темных тем.
Компонент аккордеона Material Design - Попутный ветер CSS
Компонент аккордеона со стилем Material Design, включая адаптивные эффекты и поддержку темных тем. Использует Tailwind CSS и включает в себя изображения/аватары-заполнители.
Компонент «Аккордеон»
Компонент-аккордеон в 3D-стиле, предназначенный для бизнес/корпоративных веб-сайтов с поддержкой темных тем.