Accordion Component
A 3D styled accordion component designed for business/corporate websites with dark theme support.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Accordion Component</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md transition-shadow duration-300 ease-in-out hover:shadow-lg">
<div class="border-b border-gray-300 dark:border-gray-700">
<button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
<span class="font-medium">Section 1</span>
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
</button>
<div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
<p class="text-gray-800 dark:text-gray-300">This is the content for section 1. You can place any information relevant to this section.</p>
<img src="https://picsum.photos/400/200?random=1" alt="Random Image 1" class="mt-2 rounded-md">
</div>
</div>
<div class="border-b border-gray-300 dark:border-gray-700">
<button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
<span class="font-medium">Section 2</span>
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
</button>
<div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
<p class="text-gray-800 dark:text-gray-300">This is the content for section 2. You can place any information relevant to this section.</p>
<img src="https://picsum.photos/400/200?random=2" alt="Random Image 2" class="mt-2 rounded-md">
</div>
</div>
<div>
<button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
<span class="font-medium">Section 3</span>
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
</button>
<div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
<p class="text-gray-800 dark:text-gray-300">This is the content for section 3. You can place any information relevant to this section.</p>
<img src="https://picsum.photos/400/200?random=3" alt="Random Image 3" class="mt-2 rounded-md">
</div>
</div>
</div>
</div>Related Components
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.
Material Design Accordion Component - Tailwind CSS
An accordion component with Material Design styling, including responsive effects and dark theme support. Uses Tailwind CSS and includes placeholder images/avatars.
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.