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
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.
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.
Industrial_Vibrant_Dating_Accordion
Un composant d’accordéon de style industriel modérément complexe avec des couleurs vives, adapté aux plateformes de rencontres et sociales. Comprend des éléments exposés, une typographie lourde et une réactivité totale avec prise en charge du mode sombre.