Composants Accordéon Composant accordéon

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.

Aperçu

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

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é.

Ouvrir

Neon_Glow_Accordion_Fashion_Beauty

Un composant d’accordéon simple et réactif avec des effets de néon/lueur et une palette de couleurs d’automne, adapté aux marques de mode et de beauté. Inclut la prise en charge du mode sombre.

Ouvrir

Accordéon industriel Actualités Composant

Un composant d’accordéon de style industriel pour les sites d’information et de journalisme, avec des éléments exposés, des textures métalliques et une palette de couleurs automnales. Il est réactif, conçu pour plusieurs éléments interactifs et prend en charge le mode sombre.

Ouvrir