RétroAccordéonSimple
Un composant d’accordéon simple, réactif et à thème rétro pour les sites Web d’entreprise, avec prise en charge du mode sombre à l’aide de Tailwind CSS. Ce composant utilise un schéma de couleurs triadique et ne nécessite aucun code JavaScript.
HTML Code
<div x-data="{ open: false }" class="border border-gray-300 dark:border-gray-700 rounded-lg mb-4">
<button @click="open = !open" class="w-full flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none">
<span class="font-bold">Accordion Title</span>
<svg class="w-5 h-5 transform transition-transform duration-200" :class="{ 'rotate-180': open }" 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>
</button>
<div x-show="open" class="p-4 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300">
<p>Accordion content goes here. This is a simple example with basic styling.</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
Composant d’accordéon Glassmorphism avec des couleurs vives pour les médias sociaux, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, une interface riche avec plusieurs éléments interactifs, un design réactif et une prise en charge du thème sombre. Pas besoin de code JavaScript, seulement du HTML avec des classes Tailwind.
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.