RetroAccordianWithEarthTones
Componente de acordeón retro/vintage con tonos tierra, complejidad moderada, diseño responsivo y soporte de temas oscuros para fines de portafolio.
Código HTML
<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>Componentes relacionados
NonProfit_Retro_Accordion
Un componente de acordeón complejo de temática retro diseñado para sitios web sin fines de lucro / caridad, con degradados de color apagados, transiciones suaves y capacidad de respuesta completa con soporte para modo oscuro.
Industrial_Vibrant_Dating_Accordion
Un componente de acordeón de estilo industrial moderadamente complejo con colores vibrantes, adecuado para citas y plataformas sociales. Cuenta con elementos expuestos, tipografía pesada y capacidad de respuesta total con soporte para modo oscuro.
Componente de acordeón
Un componente de acordeón simple y sensible diseñado con un efecto de morfismo de vidrio y un esquema de color análogo, adecuado para exhibir trabajos o productos en un portafolio.