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.
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
Akkordeon-Komponente
Eine Akkordeonkomponente mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen, die nur HTML und CSS (Tailwind CSS) verwenden. Die Komponente verwendet CSS für den Dunkelmodus und enthält Übergänge für sanfte Akkordeons. Es reagiert vollständig. Es wird kein JavaScript verwendet.
Neumorphismus-Akkordeon-Komponente
Akkordeon-Komponente mit neumorphem Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.
Akkordeon-Komponente
Responsive Accordion Component mit Unterstützung für dunkle Themen, monochromatischem Farbschema und Mikrointeraktionen für eine Portfolio-Website.