Componente Deslizador de carrusel
Un componente de deslizador de carrusel complejo y receptivo para sitios web de noticias/periodismo, con una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Muestra artículos de noticias con imágenes, títulos, descripciones y categorías, y está diseñado para reducir la fatiga visual.
Código HTML
<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>Componentes relacionados
Componente deslizante de carrusel de brutalismo
Brutalism Carousel Slider con Tailwind CSS, capacidad de respuesta y modo oscuro. Incluye botones de navegación y utiliza imágenes de marcador de posición.
Componente Deslizador de carrusel
Un componente deslizante de carrusel simple y receptivo con estética de Material Design, tonos sepia/marrón y soporte para modo oscuro, adecuado para un portafolio. No utiliza JavaScript, por lo que es un componente puramente basado en CSS.
Neumorfismo Control deslizante de carrusel de comercio electrónico
Un componente deslizante de carrusel neumórfico receptivo con soporte de tema oscuro para comercio electrónico, utilizando Tailwind CSS. Cuenta con una combinación de colores complementaria. No se utiliza JavaScript.