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
Componente de acordeón de diseño de materiales - Tailwind CSS
Un componente de acordeón con estilo Material Design, que incluye efectos responsivos y compatibilidad con temas oscuros. Utiliza Tailwind CSS e incluye imágenes/avatares de marcador de posición.
Componente de acordeón retro vintage
Un componente de acordeón de estilo retro / vintage con tonos tierra para la visualización de datos en el tablero. Diseñado para complejidad media con soporte de temas responsivos y oscuros.
Componente de acordeón
Componente de acordeón de modo oscuro con combinación de colores de tonos tierra, complejidad moderada, para fines de redes sociales, con diseño receptivo y soporte de tema oscuro. Sin JavaScript.