Composant de curseur de carrousel
Un composant de curseur de carrousel simple et réactif avec une typographie épurée, des tons sépia/bruns pour la documentation et les sites de base de connaissances. Inclut la prise en charge du mode sombre.
HTML Code
<div class="w-full max-w-4xl mx-auto py-8 px-4 font-sans">
<div class="relative overflow-hidden group">
<!-- Carousel Wrapper (using scroll-snap for basic 'slides') -->
<div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth hide-scrollbar transition-all duration-300 ease-in-out
bg-stone-100 dark:bg-stone-900 rounded-lg shadow-inner border border-stone-200 dark:border-stone-700">
<!-- Slide 1 -->
<div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
<span class="text-stone-600 dark:text-stone-300">01 /</span> Introduction to Concepts
</h2>
<p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
This section provides a foundational understanding of the core concepts, ensuring clarity and establishing a solid groundwork for further exploration.
</p>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
Learn More
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
<!-- Slide 2 -->
<div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
<span class="text-stone-600 dark:text-stone-300">02 /</span> Advanced Topics & Usage
</h2>
<p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
Dive deeper into the intricacies of the system, covering advanced configurations, optimal usage patterns, and best practices for seasoned users.
</p>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
Read Documentation
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
<!-- Slide 3 -->
<div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
<span class="text-stone-600 dark:text-stone-300">03 /</span> FAQs & Troubleshooting
</h2>
<p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
Find quick answers to frequently asked questions and common issues. This section helps resolve problems efficiently, minimizing downtime.
</p>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
Visit Support
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Navigation Arrows - Left (Requires JS for actual navigation, but styled for appearance) -->
<button class="absolute left-0 top-1/2 -translate-y-1/2 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 p-2 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto z-10 hidden md:block" aria-label="Previous slide">
<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>
<!-- Navigation Arrows - Right (Requires JS for actual navigation, but styled for appearance) -->
<button class="absolute right-0 top-1/2 -translate-y-1/2 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 p-2 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto z-10 hidden md:block" aria-label="Next slide">
<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>
<!-- Pagination Dots (Requires JS for actual navigation, but styled for appearance) -->
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
<span class="block w-3 h-3 rounded-full bg-stone-700 dark:bg-stone-300 transition-colors duration-200"></span>
<span class="block w-3 h-3 rounded-full bg-stone-400 dark:bg-stone-600 transition-colors duration-200"></span>
<span class="block w-3 h-3 rounded-full bg-stone-400 dark:bg-stone-600 transition-colors duration-200"></span>
</div>
</div>
<!-- Note for JS dependency -->
<p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-400">
<strong class="font-semibold">Note:</strong> This HTML structure uses <code class="font-mono">scroll-snap</code> for basic slide behavior, but full carousel functionality (button navigation, active dot states, auto-play) would require JavaScript.
</p>
</div>
<!-- Simple scrollbar hiding for demonstration -->
<style>
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
</style>Composants associés
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif avec prise en charge du mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript. Il présente une mise en page simple avec des couleurs vives pour la diapositive active, adaptée au blog ou à la consommation de contenu.
Brutalism_News_Carousel
Un composant de curseur de carrousel simple, de style brutaliste, pour les sites d’actualités et de journalisme, avec un contraste élevé, des neutres froids et une réactivité totale avec prise en charge du mode sombre. Utilise des images fictives et met l’accent sur les éléments visuels bruts.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif pour le commerce électronique avec prise en charge du mode sombre. Il présente des images de produits, des noms, des prix et des boutons d’ajout au panier. Le design utilise une palette de couleurs complémentaires adaptée au mode sombre, améliorant le confort visuel et la présentation du produit.