CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Akkordeon-Komponente

Akkordeon-Komponente

Dark Mode Accordion Component mit Farbschema in Erdtönen, mäßiger Komplexität, für Social-Media-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen. Kein JavaScript.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
  <div class="accordion">
    <div class="accordion-item">
      <input type="checkbox" id="accordion1" class="hidden">
      <label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 1
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 1.</p>
      </div>
    </div>
    <div class="accordion-item">
      <input type="checkbox" id="accordion2" class="hidden">
      <label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 2
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 2.</p>
      </div>
    </div>
  </div>
</div>

<style>
.accordion-item input:checked ~ label svg {
  transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
  display: block;
}
</style>

Verwandte Komponenten

Akkordeon-Komponente

Eine einfache, reaktionsschnelle Akkordeon-Komponente, die mit einem Glasmorphismus-Effekt und einem analogen Farbschema entworfen wurde und sich für die Präsentation von Arbeiten oder Produkten in einem Portfolio eignet.

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

Akkordeon-Komponente

Eine interaktive Akkordeonkomponente für Food-/Restaurant-Websites mit Farbverläufen, sanften Übergängen und Unterstützung für den Dunkelmodus. Entwickelt, um reaktionsschnell zu sein und eine reichhaltige Benutzeroberfläche zu bieten.

Offen