Carousel Slider Component

<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>