CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon RetroAkkordeonEinfach

RetroAkkordeonEinfach

Eine einfache, reaktionsschnelle Akkordeonkomponente im Retro-Stil für Unternehmenswebsites mit Unterstützung für den Dunkelmodus mit Tailwind CSS. Diese Komponente verwendet ein triadisches Farbschema und benötigt kein JavaScript.

Vorschau

HTML-Code 

<div x-data="{ open: false }" class="border border-gray-300 dark:border-gray-700 rounded-lg mb-4">
  <button @click="open = !open" class="w-full flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none">
    <span class="font-bold">Accordion Title</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" :class="{ 'rotate-180': open }" 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 x-show="open" class="p-4 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300">
    <p>Accordion content goes here. This is a simple example with basic styling.</p>
  </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

Akkordeon-Komponente

Akkordeonkomponente mit Materialdesign, Farbschema in Erdtönen, einfache Komplexität für E-Commerce, reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

Akkordeon-Komponente mit pastellfarbenem, minimalistischem Design

Eine komplexe, reaktionsschnelle, mit dunklen Themen kompatible Akkordeonkomponente für Portfolios, die mit einer minimalistischen/flachen Pastellästhetik unter Verwendung von Tailwind CSS gestaltet wurde. Enthält mehrere interaktive Elemente und verwendet picsum.photos für Bilder.

Offen