CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon RetroAccordianWithEarthTones

RetroAccordianWithEarthTones

Retro/Vintage-Akkordeonkomponente mit Erdtönen, moderater Komplexität, responsivem Design und Unterstützung für dunkle Themen für Portfoliozwecke.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto rounded-lg overflow-hidden md:max-w-lg bg-gray-200 dark:bg-gray-800">
  <div class="md:flex">
    <div class="w-full">
      <div class="p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 1</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>This is the content for Accordion 1. It has some text and can include images or other elements.</p>
          <img src="https://picsum.photos/seed/picsum/400/200" alt="Accordion Image 1" class="mt-2 rounded">
        </div>
      </div>
      <div class="border-t border-gray-300 dark:border-gray-700 p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 2</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>This is the content for Accordion 2. More detailed information goes here.</p>
          <ul class="list-disc list-inside">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-300 dark:border-gray-700 p-4">
        <div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 3</div>
        <div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
          <p>Accordion 3 content. Final section with concluding remarks.</p>
          <img src="https://picsum.photos/seed/unsplash/400/200" alt="Accordion Image 2" class="mt-2 rounded">
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

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

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