Accordéon Bauhaus pour les organisations à but non lucratif
Un composant d’accordéon simple et réactif conçu avec des influences Bauhaus et une palette de couleurs chaudes de coucher de soleil, adapté aux organisations à but non lucratif. Inclut la prise en charge du mode sombre.
HTML Code
<div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-gray-900 rounded-lg shadow-xl">
<h2 class="text-3xl sm:text-4xl font-extrabold text-orange-700 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight uppercase relative">
<span class="block">Our Mission</span>
<span class="absolute left-1/2 -translate-x-1/2 bottom-0 w-20 h-2 bg-red-500 dark:bg-red-700"></span>
</h2>
<div class="space-y-4">
<!-- Accordion Item 1 -->
<div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
<button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
<span class="font-semibold text-lg text-orange-900 dark:text-amber-100">What is our primary goal?</span>
<svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" 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" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
<p class="text-base leading-relaxed">Our primary goal is to empower communities through sustainable initiatives, focusing on education, health, and environmental preservation.</p>
</div>
</div>
<!-- Accordion Item 2 -->
<div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
<button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
<span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How do we achieve our impact?</span>
<svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" 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" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
<p class="text-base leading-relaxed">We work directly with local partners, implement needs-based programs, and rely on the generosity of volunteers and donors to make a lasting difference.</p>
</div>
</div>
<!-- Accordion Item 3 -->
<div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
<button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
<span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How can I get involved or donate?</span>
<svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform transition-transform duration-300" 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" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
<p class="text-base leading-relaxed">You can volunteer your time, make a one-time donation, or set up a recurring gift. Visit our 'Get Involved' page for more details on how your support makes a difference.</p>
</div>
</div>
</div>
<div class="mt-8 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-amber-50 bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 animate-pulse-slow transition duration-300 ease-in-out">
<svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4-4m0 0l-4-4m4 4H3"></path></svg>
Learn More & Donate
</a>
</div>
</div>
<!-- Alpine.js for interactivity (required for accordion functionality) -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>Composants associés
Accordéon des médias sociaux
Prise en charge des interfaces de médias sociaux, en utilisant les principes de conception matérielle, une palette de couleurs triadique et une mise en page simple. Pas de JavaScript, seulement du HTML avec des classes CSS Tailwind. Les styles du mode sombre sont inclus à l’aide du préfixe dark :.
Industrial_Vibrant_Dating_Accordion
Un composant d’accordéon de style industriel modérément complexe avec des couleurs vives, adapté aux plateformes de rencontres et sociales. Comprend des éléments exposés, une typographie lourde et une réactivité totale avec prise en charge du mode sombre.
Skeuomorphism E-commerce Accordéon aux couleurs pastel
Composant d’accordéon skeuomorphe pour le commerce électronique avec des couleurs pastel, se concentrant sur les interactions complexes et la réactivité, y compris la prise en charge du mode sombre.