Компонент «Аккордеон»
Компонент-аккордеон с дизайном 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>Связанные компоненты
Компонент «Аккордеон»
Адаптивный компонент аккордеона с поддержкой темных тем, монохроматической цветовой схемой и микровзаимодействиями для веб-сайта-портфолио.
Компонент «Аккордеон»
Простой, отзывчивый компонент-аккордеон, разработанный с эффектом стекломорфизма и аналогичной цветовой схемой, подходит для демонстрации работ или продуктов в портфолио.
Компонент «Аккордеон»
Компонент аккордеона с 3D-дизайном, адаптивными эффектами и поддержкой темной темы с использованием только HTML и CSS (Tailwind CSS). Компонент использует CSS для темного режима и включает переходы для плавных аккордеонов. Он полностью адаптивный. JavaScript не используется.