RétroAccordianWithEarthTones
Composant accordéon rétro/vintage avec des tons de terre, une complexité modérée, un design réactif et une prise en charge du thème sombre à des fins de portefeuille.
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>Composants associés
Composant accordéon
Un composant d’accordéon interactif pour les sites Web d’alimentation/restaurant, avec des dégradés de couleurs bonbons/sucrés, des transitions fluides et la prise en charge du mode sombre. Conçu pour être réactif avec une interface riche.
Accordéon Bauhaus pour les organisations à but non lucratif
Un composant d’accordéon simple et réactif conçu avec des influences Bauhaus et une palette de couleurs chaudes de coucher de soleil, adapté aux organisations à but non lucratif. Inclut la prise en charge du mode sombre.
Composant accordéon
Composant accordéon avec conception matérielle, palette de couleurs Earth Tones, complexité simple pour le commerce électronique, réactif avec prise en charge du thème sombre.