Composant d’accordéon rétro vintage
Un composant d’accordéon de style rétro/vintage avec des tons de terre pour la visualisation des données du tableau de bord. Conçu pour une complexité moyenne avec une prise en charge réactive et sombre.
HTML Code
<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>Composants associés
Composant d’accordéon de conception matérielle - Tailwind CSS
Un composant d’accordéon avec un style Material Design, y compris des effets réactifs et la prise en charge du thème sombre. Utilise Tailwind CSS et inclut des images/avatars de substitution.
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.
Neon_Glow_Sepia_Photography_Accordion
Un composant d’accordéon complexe et réactif avec un effet néon/lueur dans les tons sépia/brun, conçu pour les portfolios de photographie, avec des éléments interactifs et la prise en charge du mode sombre.