Composant de curseur de carrousel
Un composant de curseur de carrousel simple et réactif conçu pour les applications de sport/fitness avec une interface utilisateur en mode sombre, une palette de couleurs noir et blanc et une couleur d’accentuation vive.
HTML Code
<div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
<div class="overflow-hidden rounded-lg">
<div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
<!-- Slide 1 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports1/1200/800" alt="Fitness Training" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Intense Training Session</h3>
<p class="text-base text-gray-200">Push your limits and achieve your fitness goals with our advanced programs.</p>
</div>
</div>
<!-- Slide 2 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports2/1200/800" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Teamwork Makes the Dream Work</h3>
<p class="text-base text-gray-200">Join a community of athletes and elevate your performance together.</p>
</div>
</div>
<!-- Slide 3 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports3/1200/800" alt="Healthy Lifestyle" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Embrace a Healthier You</h3>
<p class="text-base text-gray-200">Discover personalized routines and nutritional guidance for a better lifestyle.</p>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons (for visual representation, functionality would require JS) -->
<button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
</button>
<button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
<!-- Dots/Indicators (for visual representation, functionality would require JS) -->
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
<span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
</div>
</div>Composants associés
Neon Glow Food Carrousel Slider
Un composant de curseur de carrousel complexe et réactif avec des effets de lueur néon et une palette de couleurs bonbons/sucrés, conçu pour les sites Web de livraison de nourriture et de restaurants, y compris la prise en charge du mode sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel complexe, de style rétro/vintage, pour les plates-formes éducatives, avec des couleurs sourdes, un design professionnel et une réactivité totale avec prise en charge du mode sombre. Conçu pour les environnements d’entreprise/professionnels.
Composant du curseur de carrousel en mode sombre
Composant de curseur de carrousel en mode sombre avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.