HTML 代码
<section class="bg-orange-50 dark:bg-gray-900 py-12 sm:py-16 lg:py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-200 text-center mb-10 sm:mb-12 lg:mb-16 font-serif tracking-tight leading-tight">
Autumn Trends on Repeat!
</h2>
<!-- Carousel Container -->
<div class="relative flex items-center justify-center">
<!-- Navigation Buttons (hidden, for illustrative purposes of interactivity) -->
<button aria-label="Previous Slide" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
<svg class="h-6 w-6 text-orange-700 dark:text-orange-300 transform rotate-180" 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>
<button aria-label="Next Slide" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
<svg class="h-6 w-6 text-orange-700 dark:text-orange-300" 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>
<!-- Carousel Slides (Illustrative - In a real scenario, this would be JS-driven) -->
<div class="relative w-full overflow-hidden">
<div class="flex space-x-6 lg:space-x-8 px-4 sm:px-0 snap-x snap-mandatory overflow-x-auto pb-4 scrollbar-hide">
<!-- Slide 1 -->
<div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
<div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
<img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1015/600/400" alt="Cozy Autumn Sweater">
<div class="p-2">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Sunset Comfort Sweater</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Wrap yourself in warmth and style. Perfect for chilly evenings.</p>
<span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Collection</span>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$79.99</span>
<button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
Snag Yours!
</button>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
<div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
<img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1018/600/400" alt="Autumn Forest Boots">
<div class="p-2">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Wanderlust Trail Boots</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Adventure awaits with these durable and stylish boots.</p>
<span class="inline-block bg-brown-100 dark:bg-brown-900 text-brown-700 dark:text-brown-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Best Seller</span>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$120.00</span>
<button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
Grab a Pair!
</button>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
<div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
<img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1020/600/400" alt="Autumn Scarf">
<div class="p-2">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Fireside Plaid Scarf</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">A touch of tartan charm for your autumn ensemble.</p>
<span class="inline-block bg-burgundy-100 dark:bg-burgundy-900 text-burgundy-700 dark:text-burgundy-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Limited Edition</span>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$45.50</span>
<button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
Wrap it Up!
</button>
</div>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
<div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
<img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1025/600/400" alt="Autumn Handbag">
<div class="p-2">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Harvest Moon Handbag</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Carry your essentials in elegant seasonal style.</p>
<span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Arrival</span>
<div class="flex justify-between items-center">
<span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$95.00</span>
<button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
Add to Cart!
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Indicator Dots (Illustrative) -->
<div class="absolute bottom-0 translate-y-full flex space-x-2 pt-4 sm:pt-6">
<span class="block w-3 h-3 rounded-full bg-orange-400 dark:bg-orange-500 opacity-75"></span>
<span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
<span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
<span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
</div>
</div>
</div>
</section>
<style>
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>