Accordéon en mode sombre (Finance/Banque)
Un composant d’accordéon simple, monochrome et sombre conçu pour les interfaces financières et bancaires. Il présente un design réactif et une prise en charge du mode sombre, en utilisant des nuances d’une seule couleur pour un look épuré.
HTML Code
<div class="max-w-3xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-950 text-gray-100 min-h-screen">
<h2 class="text-3xl font-bold text-center mb-8 text-blue-300 dark:text-blue-500">FAQs about Your Account</h2>
<div class="space-y-4">
<!-- Accordion Item 1 -->
<details class="group">
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
<span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I check my account balance?</span>
<svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</summary>
<div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
You can check your account balance by logging into your online banking portal, using our mobile app, or by visiting any of our ATM locations. Balances are updated in real-time.
</div>
</details>
<!-- Accordion Item 2 -->
<details class="group">
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
<span class="text-lg font-semibold text-blue-200 dark:text-blue-400">What are the fees associated with my account?</span>
<svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</summary>
<div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
Fees vary depending on your account type. Please refer to your account agreement for a detailed list of charges, or you can find a comprehensive fee schedule on our website under the 'Pricing' section.
</div>
</details>
<!-- Accordion Item 3 -->
<details class="group">
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
<span class="text-lg font-semibold text-blue-200 dark:text-blue-400">How do I transfer funds between accounts?</span>
<svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</summary>
<div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
You can easily transfer funds via our online banking platform or mobile app. Simply navigate to the 'Transfers' section, select your 'from' and 'to' accounts, enter the amount, and confirm the transaction.
</div>
</details>
<!-- Accordion Item 4 -->
<details class="group">
<summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none bg-gray-800 dark:bg-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200">
<span class="text-lg font-semibold text-blue-200 dark:text-blue-400">Can I set up recurring payments?</span>
<svg class="h-6 w-6 text-blue-300 dark:text-blue-500 transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</summary>
<div class="px-6 py-4 mt-2 bg-gray-850 dark:bg-gray-900 rounded-lg text-gray-300 dark:text-gray-400 text-base leading-relaxed">
Yes, our online banking system allows you to set up recurring payments for bills and transfers. Go to the 'Bill Pay' or 'Transfers' section and look for the option to schedule future or recurring transactions.
</div>
</details>
</div>
</div>Composants associés
Neumorphisme Accordéon Composant
Composant accordéon avec conception neumorphique, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
RétroAccordianWithEarthTones
Composant accordéon rétro/vintage avec des tons de terre, une complexité modérée, un design réactif et une prise en charge du thème sombre à des fins de portefeuille.
Composant accordéon
Composant d’accordéon Glassmorphism avec des couleurs vives pour les médias sociaux, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, une interface riche avec plusieurs éléments interactifs, un design réactif et une prise en charge du thème sombre. Pas besoin de code JavaScript, seulement du HTML avec des classes Tailwind.