Carousel Slider Component

<div class="relative w-full max-w-3xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden">
  <!-- Carousel wrapper -->
  <div class="relative h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg">
    <!-- Item 1 -->
    <div id="carousel-item-1" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0">
      <img src="https://picsum.photos/seed/1/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Simple Dark Mode Carousel</h3>
        <p class="text-sm md:text-base">A clean and vibrant carousel for your blog.</p>
      </div>
    </div>
    <!-- Item 2 -->
    <div id="carousel-item-2" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/2/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Engaging Content Display</h3>
        <p class="text-sm md:text-base">Showcase your articles with vibrant highlights.</p>
      </div>
    </div>
    <!-- Item 3 -->
    <div id="carousel-item-3" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/3/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Responsive Across Devices</h3>
        <p class="text-sm md:text-base">Looks great on desktop, tablet, and mobile.</p>
      </div>
    </div>
  </div>
  <!-- Slider indicators (Dots) -->
  <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2 rtl:space-x-reverse">
    <button type="button" class="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-600" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 2"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 3"></button>
  </div>
  <!-- Slider controls -->
  <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
      </svg>
      <span class="sr-only">Previous</span>
    </span>
  </button>
  <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
      </svg>
      <span class="sr-only">Next</span>
    </span>
  </button>
</div>