Composant accordéon
Un composant d’accordéon de style 3D conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du thème sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Accordion Component</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md transition-shadow duration-300 ease-in-out hover:shadow-lg">
<div class="border-b border-gray-300 dark:border-gray-700">
<button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
<span class="font-medium">Section 1</span>
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
</button>
<div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
<p class="text-gray-800 dark:text-gray-300">This is the content for section 1. You can place any information relevant to this section.</p>
<img src="https://picsum.photos/400/200?random=1" alt="Random Image 1" class="mt-2 rounded-md">
</div>
</div>
<div class="border-b border-gray-300 dark:border-gray-700">
<button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
<span class="font-medium">Section 2</span>
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
</button>
<div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
<p class="text-gray-800 dark:text-gray-300">This is the content for section 2. You can place any information relevant to this section.</p>
<img src="https://picsum.photos/400/200?random=2" alt="Random Image 2" class="mt-2 rounded-md">
</div>
</div>
<div>
<button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
<span class="font-medium">Section 3</span>
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
</button>
<div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
<p class="text-gray-800 dark:text-gray-300">This is the content for section 3. You can place any information relevant to this section.</p>
<img src="https://picsum.photos/400/200?random=3" alt="Random Image 3" class="mt-2 rounded-md">
</div>
</div>
</div>
</div>Composants associés
Neon_Glow_Sepia_Photography_Accordion
Un composant d’accordéon complexe et réactif avec un effet néon/lueur dans les tons sépia/brun, conçu pour les portfolios de photographie, avec des éléments interactifs et la prise en charge du mode sombre.
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.
Composant d’accordéon neumorphe
Un composant d’accordéon neumorphe avec une palette de couleurs triadique, adapté aux sites Web d’entreprise. Il présente un design réactif avec prise en charge du mode sombre, implémenté uniquement avec HTML et Tailwind CSS.