CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Akkordeon-Komponente

Akkordeon-Komponente

Responsive Accordion Component mit Unterstützung für dunkle Themen, monochromatischem Farbschema und Mikrointeraktionen für eine Portfolio-Website.

Vorschau

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>

Verwandte Komponenten

Neon_Glow_Accordion_Fashion_Beauty

Eine einfache, reaktionsschnelle Akkordeonkomponente mit Neon-/Leuchteffekten und herbstlicher Farbgebung, die sich für Mode- und Beauty-Marken eignet. Enthält Unterstützung für den Dunkelmodus.

Offen

Skeuomorphismus E-Commerce Akkordeon mit Pastellfarben

Skeuomorphe Akkordeonkomponente für den E-Commerce mit Pastellfarben, die sich auf komplexe Interaktionen und Reaktionsfähigkeit konzentriert, einschließlich Unterstützung des Dunkelmodus.

Offen

Bauhaus Akkordeon Komponente - Blog/Inhalt

Eine komplexe, reaktionsschnelle Akkordeonkomponente mit einem vom Bauhaus inspirierten Design mit geometrischen Formen, kühlen neutralen Farben und reichhaltigen interaktiven Elementen für den Konsum von Blogs und Inhalten. Enthält Unterstützung für den Dunkelmodus.

Offen