RetroAccordianWithEarthTones
Componente fisarmonica retrò/vintage con toni della Terra, complessità moderata, design reattivo e supporto per temi scuri per scopi di portfolio.
Codice HTML
<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>Componenti correlati
Fisarmonica sui social media
Componente Responsive Accordion con Dark Theme Supporto per le interfacce dei social media, utilizzando i principi del Material Design, una combinazione di colori triadica e un layout semplice. Niente JavaScript, solo HTML con le classi CSS di Tailwind. Gli stili della modalità scura sono inclusi utilizzando il prefisso dark:.
Cruscotto retrò Fisarmonica
Componente a fisarmonica retrò / vintage per cruscotto con combinazione di colori complementari e complessità complessa. Include un design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS. Niente JavaScript. Immagini tramite picsum.photos e avatar tramite randomuser.me.
Skeuomorphism E-commerce Fisarmonica con Colori Pastello
Componente a fisarmonica scheumorfa per l'e-commerce con colori pastello, incentrato su interazioni complesse e reattività, incluso il supporto della modalità scura.