CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Dark-Mode-Akkordeon

Dark-Mode-Akkordeon

Responsive Dark-Mode-Akkordeonkomponente für das Dashboard

Vorschau

HTML-Code 

<div class="w-full max-w-md mx-auto rounded-lg overflow-hidden">
  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 1</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 1.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 2</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 2.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 3</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 3.</p>
  </div>
</div>

Verwandte Komponenten

Material Design Akkordeon

Material Design Akkordeon für E-Commerce mit komplementärem Farbschema und Unterstützung für dunkle Themen.

Offen

Industrial_Vibrant_Dating_Accordion

Eine mäßig komplexe Akkordeonkomponente im Industriestil mit leuchtenden Farben, die sich für Dating- und soziale Plattformen eignet. Verfügt über exponierte Elemente, starke Typografie und volle Reaktionsfähigkeit mit 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