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.
Código HTML
<div class="flex flex-col p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-lg text-brown-700 dark:text-brown-300 font-bold mb-4">Dashboard</h2>
<div class="accordion space-y-4">
<!-- Accordion Item 1 -->
<div class="bg-yellow-300 dark:bg-yellow-700 rounded-lg shadow-lg">
<button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">
<span>Item 1</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
</button>
<div class="p-4 bg-yellow-200 dark:bg-yellow-600 hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-2 rounded-md">
<p class="text-brown-800 dark:text-brown-200">This is the content of item 1, providing insights and details.</p>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="bg-green-300 dark:bg-green-700 rounded-lg shadow-lg">
<button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">
<span>Item 2</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
</button>
<div class="p-4 bg-green-200 dark:bg-green-600 hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Random Image" class="mb-2 rounded-md">
<p class="text-brown-800 dark:text-brown-200">This is the content of item 2, providing insights and details.</p>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="bg-red-300 dark:bg-red-700 rounded-lg shadow-lg">
<button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">
<span>Item 3</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
</button>
<div class="p-4 bg-red-200 dark:bg-red-600 hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Random Image" class="mb-2 rounded-md">
<p class="text-brown-800 dark:text-brown-200">This is the content of item 3, providing insights and details.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de acordeón
Componente de acordeón de morfismo de vidrio con colores vibrantes para redes sociales, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, interfaz rica con múltiples elementos interactivos, diseño receptivo y soporte de temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind.
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 complejo y receptivo diseñado para sitios web de alimentos / restaurantes, con un estilo de tipografía suizo / internacional limpio con una combinación de colores alegres y dulces. Incluye soporte para modo oscuro.