Composant de curseur de carrousel
Un composant de curseur de carrousel complexe et réactif pour les sites Web d’actualités/journalisme, doté d’une interface utilisateur en mode sombre avec une palette de couleurs en niveaux de gris. Il affiche des articles d’actualité avec des images, des titres, des descriptions et des catégories, et est conçu pour réduire la fatigue oculaire.
HTML Code
<div class="relative w-full max-w-7xl mx-auto py-8 px-4 dark:bg-gray-900 bg-white sm:px-6 lg:px-8">
<!-- Carousel Header -->
<div class="flex items-center justify-between mb-8">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Latest Headlines
</h2>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
View All
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
<!-- Carousel Container (Simplified for static HTML, requires JS for actual carousel functionality) -->
<!-- In a real scenario, this would be a JS-controlled carousel. For this HTML-only component, we'll show a responsive grid layout that implies a carousel structure. -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Carousel Item 1 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="News Article 1" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Technology
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
Breakthrough in AI Research Announced
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
Researchers at the leading global institute have unveiled a groundbreaking development in artificial intelligence, promising to revolutionize several industries.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
Jane Doe
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Editor</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=2" alt="News Article 2" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Politics
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
Global Leaders Discuss Climate Change at Summit
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
Heads of state convened today for a critical summit to address the escalating climate crisis and pledge new initiatives.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
John Smith
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Reporter</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=3" alt="News Article 3" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Health
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
New Study Reveals Benefits of Mediterranean Diet
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
A comprehensive new study has provided compelling evidence regarding the significant health benefits associated with adhering to a Mediterranean diet.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
David Lee
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Correspondent</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
</div>
<!-- Pagination/Navigation (Placeholder for a real carousel) -->
<div class="mt-12 flex justify-center space-x-2">
<button aria-label="Previous slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<span class="sr-only">Current slide: 1</span>
<button aria-label="Slide 1" class="w-3 h-3 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-transparent ring-offset-2 ring-offset-gray-900 focus:outline-none focus:ring-gray-500"></button>
<button aria-label="Slide 2" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
<button aria-label="Slide 3" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
<button aria-label="Next slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>Composants associés
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.
Glassmorphism Carrousel Slider
Un composant de curseur de carrousel réactif avec un style glassmorphism, adapté à la consommation de blog et de contenu. Il comporte plusieurs diapositives de contenu, des éléments en verre dépoli et est conçu pour les thèmes clairs et sombres.
Composant de curseur de carrousel
Un composant de curseur de carrousel simple et réactif avec l’esthétique de Material Design, les tons sépia/brun et la prise en charge du mode sombre, adapté à un portfolio. N’utilise pas de JavaScript, ce qui en fait un composant purement basé sur CSS.