Accordéon en mode sombre
Composant d’accordéon réactif en mode sombre pour le tableau de bord
HTML Code
<div class="w-full max-w-md mx-auto rounded-lg overflow-hidden">
<div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
<span>Section 1</span>
<svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="p-4 bg-gray-700 hidden">
<p>Content for section 1.</p>
</div>
<div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
<span>Section 2</span>
<svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="p-4 bg-gray-700 hidden">
<p>Content for section 2.</p>
</div>
<div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
<span>Section 3</span>
<svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<div class="p-4 bg-gray-700 hidden">
<p>Content for section 3.</p>
</div>
</div>Composants associés
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.
Composant accordéon Bauhaus - Blog/Contenu
Un composant d’accordéon complexe et réactif avec un design inspiré du Bauhaus, avec des formes géométriques, des couleurs neutres froides et des éléments interactifs riches pour la consommation de blog/contenu. Inclut la prise en charge du mode sombre.
Composant d’accordéon neumorphe
Un composant d’accordéon neumorphe avec une palette de couleurs triadique, adapté aux sites Web d’entreprise. Il présente un design réactif avec prise en charge du mode sombre, implémenté uniquement avec HTML et Tailwind CSS.