Composant accordéon
Un composant d’accordéon simple et réactif conçu avec un effet de glassmorphism et une palette de couleurs analogue, adapté à la présentation de travaux ou de produits dans un portfolio.
HTML Code
<div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-md mx-auto">
<h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white">My Portfolio</h2>
<div class="mt-4">
<div class="rounded-lg shadow-md overflow-hidden">
<div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
<h3 class="font-semibold text-gray-800 dark:text-white">Project 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Project 1.</p>
</div>
<div class="bg-purple-100 dark:bg-purple-700 p-4 cursor-pointer hover:bg-purple-200 dark:hover:bg-purple-600 transition-colors">
<h3 class="font-semibold text-gray-800 dark:text-white">Project 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Project 2.</p>
</div>
<div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
<h3 class="font-semibold text-gray-800 dark:text-white">Project 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Project 3.</p>
</div>
</div>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg mb-2">
<p class="text-gray-800 dark:text-white">Showcasing beautiful projects.</p>
</div>
<div class="mt-4 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white dark:border-gray-800">
</div>
</div>Composants associés
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.
3D_Gradient_Rainbow_Accordion_Sports_Fitness
Un composant d’accordéon simple et réactif avec un design 3D et une palette de couleurs arc-en-ciel dégradée, adapté aux applications sportives/de fitness. Inclut la prise en charge du mode sombre.
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.