Composant accordéon
Composant accordéon avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.
HTML Code
<div class="max-w-md mx-auto p-8">
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
</div>
</div>
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
</div>
</div>
<div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
<div class="p-4 cursor-pointer">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
</div>
<div class="p-4 hidden">
<p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>Composants associés
Accordéon industriel Actualités Composant
Un composant d’accordéon de style industriel pour les sites d’information et de journalisme, avec des éléments exposés, des textures métalliques et une palette de couleurs automnales. Il est réactif, conçu pour plusieurs éléments interactifs et prend en charge le mode sombre.
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.
Accordéon neumorphe
Un composant d’accordéon simple, réactif et compatible avec le mode sombre avec un design neumorphe en niveaux de gris, adapté aux sections de portfolio.