Accordion Component
Accordion Component with Neumorphism design, responsive effects and dark theme support.
HTML Code
<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>Related Components
Accordion Component
Glassmorphism Accordion Component with vibrant colors for social media, featuring frosted glass-like translucent elements with blur effects, rich interface with multiple interactive elements, responsive design and dark theme support. No JavaScript code needed, only HTML with Tailwind classes.
Neumorphism Accordion Component
Accordion Component with Neumorphic design, responsive effects, and dark theme support using Tailwind CSS.