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
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 :.
Neon_Glow_Accordion_Fashion_Beauty
Un composant d’accordéon simple et réactif avec des effets de néon/lueur et une palette de couleurs d’automne, adapté aux marques de mode et de beauté. Inclut la prise en charge du mode sombre.
RétroAccordéonSimple
Un composant d’accordéon simple, réactif et à thème rétro pour les sites Web d’entreprise, avec prise en charge du mode sombre à l’aide de Tailwind CSS. Ce composant utilise un schéma de couleurs triadique et ne nécessite aucun code JavaScript.