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
Composant d’accordéon de conception matérielle - Tailwind CSS
Un composant d’accordéon avec un style Material Design, y compris des effets réactifs et la prise en charge du thème sombre. Utilise Tailwind CSS et inclut des images/avatars de substitution.
Composant accordéon
Composant accordéon réactif avec prise en charge du thème sombre, schéma de couleurs monochromatiques et micro-interactions pour un site Web de portfolio.
Composant accordéon
Un composant d’accordéon avec une conception 3D, des effets réactifs et une prise en charge du thème sombre en utilisant uniquement HTML et CSS (Tailwind CSS). Le composant utilise CSS pour le mode sombre et inclut des transitions pour des accordéons fluides. Il est entièrement réactif. Aucun JavaScript n’est utilisé.