HTML 代码
<div class="w-full max-w-4xl mx-auto py-8 px-4 font-sans">
<div class="relative overflow-hidden group">
<!-- Carousel Wrapper (using scroll-snap for basic 'slides') -->
<div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth hide-scrollbar transition-all duration-300 ease-in-out
bg-stone-100 dark:bg-stone-900 rounded-lg shadow-inner border border-stone-200 dark:border-stone-700">
<!-- Slide 1 -->
<div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
<span class="text-stone-600 dark:text-stone-300">01 /</span> Introduction to Concepts
</h2>
<p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
This section provides a foundational understanding of the core concepts, ensuring clarity and establishing a solid groundwork for further exploration.
</p>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
Learn More
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
<!-- Slide 2 -->
<div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
<span class="text-stone-600 dark:text-stone-300">02 /</span> Advanced Topics & Usage
</h2>
<p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
Dive deeper into the intricacies of the system, covering advanced configurations, optimal usage patterns, and best practices for seasoned users.
</p>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
Read Documentation
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
<!-- Slide 3 -->
<div class="flex-none w-full snap-center p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out flex flex-col items-start justify-center">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-4 text-stone-800 dark:text-stone-100 leading-tight">
<span class="text-stone-600 dark:text-stone-300">03 /</span> FAQs & Troubleshooting
</h2>
<p class="text-base sm:text-lg text-stone-700 dark:text-stone-300 leading-relaxed mb-6">
Find quick answers to frequently asked questions and common issues. This section helps resolve problems efficiently, minimizing downtime.
</p>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-stone-100 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
dark:text-stone-900 dark:bg-stone-300 dark:hover:bg-stone-200 dark:focus:ring-stone-400 dark:focus:ring-offset-stone-900">
Visit Support
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Navigation Arrows - Left (Requires JS for actual navigation, but styled for appearance) -->
<button class="absolute left-0 top-1/2 -translate-y-1/2 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 p-2 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto z-10 hidden md:block" aria-label="Previous slide">
<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>
<!-- Navigation Arrows - Right (Requires JS for actual navigation, but styled for appearance) -->
<button class="absolute right-0 top-1/2 -translate-y-1/2 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 p-2 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto z-10 hidden md:block" aria-label="Next slide">
<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>
<!-- Pagination Dots (Requires JS for actual navigation, but styled for appearance) -->
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
<span class="block w-3 h-3 rounded-full bg-stone-700 dark:bg-stone-300 transition-colors duration-200"></span>
<span class="block w-3 h-3 rounded-full bg-stone-400 dark:bg-stone-600 transition-colors duration-200"></span>
<span class="block w-3 h-3 rounded-full bg-stone-400 dark:bg-stone-600 transition-colors duration-200"></span>
</div>
</div>
<!-- Note for JS dependency -->
<p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-400">
<strong class="font-semibold">Note:</strong> This HTML structure uses <code class="font-mono">scroll-snap</code> for basic slide behavior, but full carousel functionality (button navigation, active dot states, auto-play) would require JavaScript.
</p>
</div>
<!-- Simple scrollbar hiding for demonstration -->
<style>
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
</style>