Componente Deslizador de carrusel
Un componente deslizante de carrusel simple y receptivo diseñado para aplicaciones deportivas/de fitness con una interfaz de usuario de modo oscuro, una combinación de colores en blanco y negro y un color de acento brillante.
Código HTML
<div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
<div class="overflow-hidden rounded-lg">
<div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
<!-- Slide 1 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports1/1200/800" alt="Fitness Training" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Intense Training Session</h3>
<p class="text-base text-gray-200">Push your limits and achieve your fitness goals with our advanced programs.</p>
</div>
</div>
<!-- Slide 2 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports2/1200/800" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Teamwork Makes the Dream Work</h3>
<p class="text-base text-gray-200">Join a community of athletes and elevate your performance together.</p>
</div>
</div>
<!-- Slide 3 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports3/1200/800" alt="Healthy Lifestyle" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Embrace a Healthier You</h3>
<p class="text-base text-gray-200">Discover personalized routines and nutritional guidance for a better lifestyle.</p>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons (for visual representation, functionality would require JS) -->
<button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<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>
<button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<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>
<!-- Dots/Indicators (for visual representation, functionality would require JS) -->
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
<span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
</div>
</div>Componentes relacionados
Componente Deslizador de carrusel
Un componente deslizante de carrusel receptivo diseñado en un estilo brutalista utilizando Tailwind CSS, con alto contraste, diseños inusuales y soporte para temas oscuros.
Skeuomorphic_Dating_Carousel
Un componente deslizante de carrusel simple y receptivo con elementos de diseño esqueuomórficos y un esquema de color análogo, adecuado para plataformas sociales o de citas. Incluye soporte para modo oscuro.
Retro_Vintage_Sunset_Carousel_Slider_Component
Un componente deslizante de carrusel complejo y receptivo con una estética retro/vintage, una combinación de colores cálidos al atardecer, diseñado para casos de uso en el tablero. Incluye flechas de navegación, puntos y compatibilidad con el modo oscuro.