Composant de curseur de carrousel
Un composant de curseur de carrousel complexe et réactif avec une palette de couleurs triadique pour les entreprises/professionnels, conçu pour la présentation de données météorologiques/climatiques. Inclut la prise en charge du mode sombre et utilise le HTML sémantique.
HTML Code
<div class="relative w-full max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900 overflow-hidden">
<h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-10">Global Climate Insights</h2>
<div class="relative flex items-center justify-center">
<button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
<svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" 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>
<div class="w-full overflow-hidden">
<div class="flex transition-transform duration-500 ease-in-out" style="transform: translateX(0%);">
<!-- Slide 1 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1025/600/400" alt="Rainfall Pattern" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">HOT TOPIC</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Global Rainfall Patterns</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Analyzes the shifts in precipitation, highlighting regions susceptible to drought and flooding due to climate change.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>3,200 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>March 15, 2023</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Leo Thompson</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Climatologist</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1018/600/400" alt="Temperature Trends" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-teal-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">NEW RESEARCH</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Arctic Ice Melt Projections</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Examines the rapid melting of polar ice caps and its significant implications for global sea levels and ecosystems.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>5,100 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>Feb. 28, 2023</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Sofia Rossi</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Oceanographer</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1060/600/400" alt="Extreme Weather Events" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-cyan-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">FEATURED</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Frequency of Extreme Weather</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Investigates the rising occurrence of severe storms, heatwaves, and wildfires globally, linking them to changing climate.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>4,500 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>Jan. 20, 2023</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/women/52.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Prof. Clara Davies</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Meteorologist</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1029/600/400" alt="Ocean Acidification" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">URGENT</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Ocean Acidification Impacts</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Details the increasing acidity of oceans due to CO2 absorption and its devastating effects on marine life and coral reefs.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>6,800 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>Dec. 5, 2022</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Dr. James Chen</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Marine Biologist</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button aria-label="Next slide" class="absolute right-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
<svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" 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>
</div>
<div role="tablist" aria-label="Carousel pagination" class="flex justify-center mt-8 space-x-2">
<button role="tab" aria-selected="true" aria-controls="slide-1" class="w-3 h-3 bg-cyan-600 dark:bg-cyan-400 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"></button>
<button role="tab" aria-selected="false" aria-controls="slide-2" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
<button role="tab" aria-selected="false" aria-controls="slide-3" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
<button role="tab" aria-selected="false" aria-controls="slide-4" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
</div>
</div>Composants associés
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.
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
Implémentez un composant Web Carrousel Slider Component avec le style de conception « Neumorphisme - Un style d’interface utilisateur doux qui crée des éléments semblant extruder de l’arrière-plan à l’aide d’ombres subtiles » en utilisant le schéma de couleurs « Complémentaire - Couleurs opposées les unes aux autres sur la roue chromatique » et le niveau de complexité « Complexe - Interface riche avec plusieurs éléments interactifs », à l’objectif « Portfolio - Pour présenter le travail ou les produits » à l’aide de Tailwind CSS. Créez un design réactif avec la prise en charge du thème sombre. Aucun code JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Si vous avez besoin d’images, utilisez picsum.photos pour les images et randomuser.me pour les avatars.