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
Tableau de bord rétro accordéon
Composant d’accordéon rétro / vintage pour tableau de bord avec palette de couleurs complémentaires et complexité complexe. Comprend un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript. Images via picsum.photos et avatars via randomuser.me.
Skeuomorphism E-commerce Accordéon aux couleurs pastel
Composant d’accordéon skeuomorphe pour le commerce électronique avec des couleurs pastel, se concentrant sur les interactions complexes et la réactivité, y compris la prise en charge du mode sombre.
Composant accordéon
Un composant d’accordéon simple et réactif conçu avec un effet de glassmorphism et une palette de couleurs analogue, adapté à la présentation de travaux ou de produits dans un portfolio.