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
Accordéon des médias sociaux
Prise en charge des interfaces de médias sociaux, en utilisant les principes de conception matérielle, une palette de couleurs triadique et une mise en page simple. Pas de JavaScript, seulement du HTML avec des classes CSS Tailwind. Les styles du mode sombre sont inclus à l’aide du préfixe dark :.
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.