Accordion Component
Responsive Accordion Component with dark theme support, monochromatic color scheme, and microinteractions for a portfolio website.
HTML Code
<div class="w-full max-w-md mx-auto my-8">
<div class="shadow-md rounded-md overflow-hidden dark:bg-gray-800">
<div class="border-b border-gray-200 dark:border-gray-700">
<button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
<span>Section 1</span>
<svg class="w-4 h-4 transform transition-transform duration-300" 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 class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
<p class="text-gray-600 dark:text-gray-400">Content for section 1 goes here.</p>
</div>
</div>
<div class="border-b border-gray-200 dark:border-gray-700">
<button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
<span>Section 2</span>
<svg class="w-4 h-4 transform transition-transform duration-300" 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 class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
<p class="text-gray-600 dark:text-gray-400">Content for section 2 goes here.</p>
</div>
</div>
<div>
<button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
<span>Section 3</span>
<svg class="w-4 h-4 transform transition-transform duration-300" 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 class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
<p class="text-gray-600 dark:text-gray-400">Content for section 3 goes here.</p>
</div>
</div>
</div>
</div>Related Components
Skeuomorphism E-commerce Accordion with Pastel Colors
Skeuomorphic Accordion Component for E-commerce with Pastel colors, focusing on complex interactions and responsiveness, including dark mode support.
Accordion Component
Dark Mode Accordion Component with Earth tones color scheme, moderate complexity, for Social Media purpose, with responsive design and dark theme support. No JavaScript.
Accordion Component with Pastel Minimalist Design
A complex, responsive, dark-theme compatible accordion component for portfolios, designed with a minimalist/flat pastel aesthetic using Tailwind CSS. Includes multiple interactive elements and uses picsum.photos for images.