Composant accordéon
Composant accordéon réactif avec prise en charge du thème sombre, schéma de couleurs monochromatiques et micro-interactions pour un site Web de portfolio.
HTML Code
<div class="w-full max-w-md mx-auto my-8">
<div class="shadow-md rounded-md overflow-hidden dark:bg-gray-800">
<div class="border-b border-gray-200 dark:border-gray-700">
<button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
<span>Section 1</span>
<svg class="w-4 h-4 transform transition-transform duration-300" 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 class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
<p class="text-gray-600 dark:text-gray-400">Content for section 1 goes here.</p>
</div>
</div>
<div class="border-b border-gray-200 dark:border-gray-700">
<button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
<span>Section 2</span>
<svg class="w-4 h-4 transform transition-transform duration-300" 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 class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
<p class="text-gray-600 dark:text-gray-400">Content for section 2 goes here.</p>
</div>
</div>
<div>
<button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
<span>Section 3</span>
<svg class="w-4 h-4 transform transition-transform duration-300" 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 class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
<p class="text-gray-600 dark:text-gray-400">Content for section 3 goes here.</p>
</div>
</div>
</div>
</div>Composants associés
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.
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 :.
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.