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.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center font-sans">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
<div class="text-center py-6 px-4 sm:px-6 bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 dark:from-red-700 dark:via-yellow-700 dark:via-green-700 dark:via-blue-700 dark:to-purple-700 text-white">
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Fitness FAQs</h2>
<p class="mt-2 text-sm sm:text-base opacity-90">Your guide to a healthier, stronger you!</p>
</div>
<div class="p-4 sm:p-6 space-y-4">
<!-- Accordion Item 1 -->
<details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-blue-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
<summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-700 dark:to-blue-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-blue-600 group-open:to-indigo-500 relative z-10">
<span>How often should I work out?</span>
<svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</summary>
<div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
<p class="text-base leading-relaxed">For general fitness, aim for 3-5 days a week, combining cardio and strength training. Listen to your body and allow for rest days!</p>
<div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
</div>
</details>
<!-- Accordion Item 2 -->
<details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-purple-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
<summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-purple-500 to-pink-600 dark:from-purple-700 dark:to-pink-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-pink-600 group-open:to-purple-500 relative z-10">
<span>What's the best diet for muscle gain?</span>
<svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</summary>
<div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
<p class="text-base leading-relaxed">Focus on a high-protein diet with complex carbohydrates and healthy fats. Ensure you're in a caloric surplus for effective muscle growth.</p>
<div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
</div>
</details>
<!-- Accordion Item 3 -->
<details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-green-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
<summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-700 dark:to-teal-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-teal-600 group-open:to-green-500 relative z-10">
<span>How important is stretching?</span>
<svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</summary>
<div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
<p class="text-base leading-relaxed">Stretching improves flexibility, reduces injury risk, and enhances post-workout recovery. Incorporate dynamic stretches before and static stretches after workouts.</p>
<div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
</div>
</details>
</div>
</div>
</div>Composants associés
Composant accordéon
Un composant d’accordéon complexe et réactif conçu pour les sites Web d’alimentation/restaurant, avec un style typographique suisse/international épuré avec une palette de couleurs joyeuses de bonbons et de sucreries. Inclut la prise en charge du mode sombre.
Accordéon Bauhaus pour les organisations à but non lucratif
Un composant d’accordéon simple et réactif conçu avec des influences Bauhaus et une palette de couleurs chaudes de coucher de soleil, adapté aux organisations à but non lucratif. 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.