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.
HTML Code
<section class="relative w-full overflow-hidden bg-gray-50 dark:bg-gray-900 py-8 md:py-16 lg:py-20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-800 dark:text-gray-100 text-center mb-10 md:mb-14 font-serif relative z-10">
Explore Our Courses
<span class="block w-24 h-1 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-2"></span>
</h2>
<!-- Carousel Wrapper (Static for this example as JS is not allowed) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 relative z-10">
<!-- Carousel Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-blue-700 dark:border-blue-500">
<img src="https://picsum.photos/400/250?random=1" alt="Course Image" class="w-full h-48 object-cover object-center">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-semibold text-yellow-700 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-800 px-3 py-1 rounded-full">New</span>
<span class="text-gray-500 dark:text-gray-400 text-sm">24 Lessons</span>
</div>
<h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Foundations of Digital Marketing</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Master the essentials of online advertising, SEO, social media, and content creation to build effective digital campaigns.</p>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-rose-500">
<span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Dr. Alex Turner</span>
</div>
<a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
Enroll Now
<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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-green-700 dark:border-green-500">
<img src="https://picsum.photos/400/250?random=2" alt="Course Image" class="w-full h-48 object-cover object-center">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-semibold text-rose-700 dark:text-rose-400 bg-rose-100 dark:bg-rose-800 px-3 py-1 rounded-full">Trending</span>
<span class="text-gray-500 dark:text-gray-400 text-sm">36 Lessons</span>
</div>
<h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Advanced Data Science with Python</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Dive deep into machine learning algorithms, statistical modeling, and big data analysis using Python libraries.</p>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-blue-500">
<span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Prof. Sarah Chen</span>
</div>
<a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
Enroll Now
<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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-rose-700 dark:border-rose-500">
<img src="https://picsum.photos/400/250?random=3" alt="Course Image" class="w-full h-48 object-cover object-center">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-semibold text-blue-700 dark:text-blue-400 bg-blue-100 dark:bg-blue-800 px-3 py-1 rounded-full">Popular</span>
<span class="text-gray-500 dark:text-gray-400 text-sm">18 Lessons</span>
</div>
<h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Effective Business Communication</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Improve your verbal, non-verbal, and written communication skills for professional success in any industry.</p>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-emerald-500">
<span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Ms. Emily White</span>
</div>
<a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
Enroll Now
<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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
<!-- Pagination Dots (Visual only, no JS) -->
<div class="flex justify-center items-center space-x-3 mt-10 md:mt-14 relative z-10">
<button type="button" class="w-3 h-3 rounded-full bg-blue-700 dark:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 1"></button>
<button type="button" class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-blue-400 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 2"></button>
<button type="button" class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-blue-400 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 3"></button>
</div>
<!-- Decorative Background Elements (Visual only) -->
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5">
<svg class="w-full h-full" viewBox="0 0 1440 320" preserveAspectRatio="none">
<defs>
<pattern id="retro-pattern" patternUnits="userSpaceOnUse" width="60" height="60">
<rect x="0" y="0" width="60" height="60" fill="var(--color-bg)"/>
<path d="M30 0L60 30L30 60L0 30Z" fill="var(--color-pattern-dark)" opacity="0.2"/>
<rect x="15" y="15" width="30" height="30" fill="var(--color-pattern-light)" opacity="0.3"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#retro-pattern)"/>
<style>
.dark {
--color-bg: #111827; /* gray-900 */
--color-pattern-dark: #374151; /* gray-700 */
--color-pattern-light: #4b5563; /* gray-600 */
}
/* Default (Light Mode) */
:not(.dark) {
--color-bg: #f9fafb; /* gray-50 */
--color-pattern-dark: #d1d5db; /* gray-300 */
--color-pattern-light: #e5e7eb; /* gray-200 */
}
</style>
</svg>
</div>
</div>
</section>Composants associés
Skeuomorphic_Dating_Carousel
Un composant de curseur de carrousel simple et réactif avec des éléments de conception skeuomorphes et une palette de couleurs analogue, adapté aux plateformes de rencontres ou sociales. Inclut la prise en charge du mode sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge des thèmes sombres.
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.