Componente Deslizador de carrusel
Un componente de deslizador de carrusel simple diseñado para el comercio electrónico en modo oscuro utilizando Tailwind CSS.
Código HTML
<div class="relative w-full max-w-lg mx-auto">
<div class="overflow-hidden rounded-lg shadow-lg">
<div class="carousel-inner dark:bg-gray-800 bg-gray-100">
<div class="carousel-item active">
<img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
<div class="p-4">
<h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
<button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
<div class="p-4">
<h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
<button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
<div class="p-4">
<h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
<button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
</div>
</div>
</div>
<!-- Carousel controls (optional) -->
<button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
❮
</button>
<button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
❯
</button>
</div>
</div>
<style>
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
}
</style>Componentes relacionados
Componente Deslizador de carrusel
Implemente un componente web Carousel Slider Component con estilo de diseño "Neumorfismo - Un estilo de interfaz de usuario suave que crea elementos que parecen extruirse desde el fondo usando sombras sutiles" usando el esquema de color "Complementario - Colores opuestos entre sí en la rueda de colores" y el nivel de complejidad "Complejo - Interfaz rica con múltiples elementos interactivos", para el propósito "Portafolio - Para mostrar trabajos o productos" usando Tailwind CSS. Crea un diseño responsivo con soporte para temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Si se necesitan imágenes, use picsum.photos para las imágenes y randomuser.me para los avatares.
Deslizador de carrusel de alimentos Neon Glow
Un componente deslizante de carrusel complejo y receptivo con efectos de brillo de neón y una combinación de colores dulces/dulces, diseñado para sitios web de restaurantes y entrega de alimentos, incluida la compatibilidad con el modo oscuro.
Retro_Vintage_Agriculture_Carousel
Un componente deslizante de carrusel de temática retro / vintage para sitios web de agricultura / agricultura, con diseño monocromático, estética nostálgica de los 80 / 90 y capacidad de respuesta total con soporte para modo oscuro.