Composant d’accordéon au design minimaliste pastel
Un composant d’accordéon complexe, réactif et compatible avec les thèmes sombres pour les portfolios, conçu avec une esthétique minimaliste/pastel plat à l’aide de Tailwind CSS. Comprend plusieurs éléments interactifs et utilise picsum.photos pour les images.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/accordion1/400/300" alt="Project image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Name 1</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Title</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the project, highlighting its purpose and key features.</p>
<div class="mt-4">
<details class="group">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none text-gray-700 dark:text-gray-300">
<span>Details</span>
<span class="transition group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M12 15l-6-6 6-6"></path><path d="M18 15l-6-6 6-6"></path></svg>
</span>
</summary>
<p class="text-gray-500 dark:text-gray-400 mt-3">
More detailed information about the project, technologies used, challenges faced, and solutions implemented.
</p>
</details>
</div>
</div>
</div>
</div>
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/accordion2/400/300" alt="Project image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Project Name 2</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Title</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the second project, highlighting its purpose and key features.</p>
<div class="mt-4">
<details class="group">
<summary class="flex justify-between items-center font-medium cursor-pointer list-none text-gray-700 dark:text-gray-300">
<span>Details</span>
<span class="transition group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M12 15l-6-6 6-6"></path><path d="M18 15l-6-6 6-6"></path></svg>
</span>
</summary>
<p class="text-gray-500 dark:text-gray-400 mt-3">
More detailed information about the project, technologies used, challenges faced, and solutions implemented.
</p>
</details>
</div>
</div>
</div>
</div>Composants associés
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.
Tableau de bord rétro accordéon
Composant d’accordéon rétro / vintage pour tableau de bord avec palette de couleurs complémentaires et complexité complexe. Comprend un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript. Images via picsum.photos et avatars via randomuser.me.
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.