Carousel Slider 구성 요소

<div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <div class="overflow-hidden rounded-lg">
    <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
      <!-- Slide 1 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports1/1200/800" alt="Fitness Training" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Intense Training Session</h3>
          <p class="text-base text-gray-200">Push your limits and achieve your fitness goals with our advanced programs.</p>
        </div>
      </div>
      <!-- Slide 2 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports2/1200/800" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Teamwork Makes the Dream Work</h3>
          <p class="text-base text-gray-200">Join a community of athletes and elevate your performance together.</p>
        </div>
      </div>
      <!-- Slide 3 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports3/1200/800" alt="Healthy Lifestyle" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Embrace a Healthier You</h3>
          <p class="text-base text-gray-200">Discover personalized routines and nutritional guidance for a better lifestyle.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Navigation Buttons (for visual representation, functionality would require JS) -->
  <button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
    <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>
  <button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
    <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>
  <!-- Dots/Indicators (for visual representation, functionality would require JS) -->
  <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
    <span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
  </div>
</div>