Componente del dispositivo di scorrimento del carosello
Un semplice componente di scorrimento del carosello progettato per l'e-commerce in modalità oscura utilizzando Tailwind CSS.
Codice 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>Componenti correlati
Componente del dispositivo di scorrimento del carosello
Un componente minimalista del cursore a carosello progettato per i blog e il consumo di contenuti, con combinazione di colori triadica e design reattivo con supporto per temi scuri.
Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento a carosello reattivo con microinterazioni e supporto per temi scuri.
Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento del carosello reattivo progettato in stile brutalismo utilizzando Tailwind CSS, con contrasto elevato, layout insoliti e supporto per temi scuri.