Composant accordéon
Composant d’accordéon en mode sombre avec palette de couleurs de tons de terre, complexité modérée, à des fins de médias sociaux, avec un design réactif et une prise en charge du thème sombre. Pas de JavaScript.
HTML Code
<div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
<div class="accordion">
<div class="accordion-item">
<input type="checkbox" id="accordion1" class="hidden">
<label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
Section 1
<svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
<p>Content for section 1.</p>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" id="accordion2" class="hidden">
<label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
Section 2
<svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
<p>Content for section 2.</p>
</div>
</div>
</div>
</div>
<style>
.accordion-item input:checked ~ label svg {
transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
display: block;
}
</style>Composants associés
Composant accordéon
Un composant d’accordéon de style 3D conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du thème sombre.
Accordéon en mode sombre (Finance/Banque)
Un composant d’accordéon simple, monochrome et sombre conçu pour les interfaces financières et bancaires. Il présente un design réactif et une prise en charge du mode sombre, en utilisant des nuances d’une seule couleur pour un look épuré.
NonProfit_Retro_Accordion
Un composant d’accordéon complexe à thème rétro conçu pour les sites Web à but non lucratif/caritatifs, avec des dégradés de couleurs sourdes, des transitions fluides et une réactivité totale avec prise en charge du mode sombre.