RetroAccordianWithEarthTones
Retro/Vintage Accordion Component with Earth tones, moderate complexity, responsive design, and dark theme support for Portfolio purpose.
HTML Code
<div class="max-w-md mx-auto rounded-lg overflow-hidden md:max-w-lg bg-gray-200 dark:bg-gray-800">
<div class="md:flex">
<div class="w-full">
<div class="p-4">
<div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 1</div>
<div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
<p>This is the content for Accordion 1. It has some text and can include images or other elements.</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Accordion Image 1" class="mt-2 rounded">
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-700 p-4">
<div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 2</div>
<div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
<p>This is the content for Accordion 2. More detailed information goes here.</p>
<ul class="list-disc list-inside">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-700 p-4">
<div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 3</div>
<div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
<p>Accordion 3 content. Final section with concluding remarks.</p>
<img src="https://picsum.photos/seed/unsplash/400/200" alt="Accordion Image 2" class="mt-2 rounded">
</div>
</div>
</div>
</div>
</div>Related Components
Bauhaus Accordion for Non-Profit
A simple, responsive accordion component designed with Bauhaus influences and a warm sunset color scheme, suitable for non-profit organizations. Includes dark mode support.
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.
NonProfit_Retro_Accordion
A complex, retro-themed accordion component designed for non-profit/charity websites, featuring muted color gradients, smooth transitions, and full responsiveness with dark mode support.