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.
Código HTML
<div class="flex items-center justify-center w-full h-full py-24 sm:py-8 px-4">
<div class="w-full relative flex items-center justify-center">
<button aria-label="slide backward" class="absolute z-30 left-0 ml-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 cursor-pointer" id="prev">
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 1L1 7L7 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div class="w-full h-full mx-auto overflow-x-hidden overflow-y-hidden">
<div id="slider" class="h-full flex lg:gap-8 md:gap-6 gap-14 items-center justify-start transition ease-out duration-700">
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
<div class="flex flex-shrink-0 relative w-full sm:w-auto">
<img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
<div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
<h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
<div class="flex h-full items-end pb-6">
<h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
</div>
</div>
</div>
</div>
</div>
<button aria-label="slide forward" class="absolute z-30 right-0 mr-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" id="next">
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L7 7L1 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>Componentes relacionados
Componente deslizante de carrusel 3D para cartera
Un componente deslizante de carrusel sensible inspirado en 3D para exhibir elementos de cartera, con colores complementarios y compatibilidad con el modo oscuro. Diseñado pensando en la profundidad y el compromiso.
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.
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.