Componente Deslizador de carrusel

<div class="relative w-full overflow-hidden bg-pink-100 dark:bg-gray-900 group">
  <!-- Carousel Wrapper - This will ideally be controlled by JS for actual sliding, but for pure HTML, we show multiple states -->
  <div class="flex transition-transform duration-700 ease-in-out" style="transform: translateX(0%);">

    <!-- Slide 1 -->
    <div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
      <div class="w-full md:w-1/2 lg:w-2/5">
        <img src="https://picsum.photos/600/400?random=1" alt="Event Highlight" class="rounded-2xl shadow-lg ring-4 ring-pink-300 dark:ring-pink-700 group-hover:ring-pink-400 dark:group-hover:ring-pink-600 transition-all duration-300 transform group-hover:scale-105">
      </div>
      <div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 lg:mb-6 leading-tight group-hover:text-pink-700 dark:group-hover:text-pink-300 transition-colors duration-300">
          Sweet Dreams Conference 2024
        </h2>
        <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
          Dive into the world of confectionery arts and business. Join us for inspiring talks, workshops, and networking opportunities.
        </p>
        <div class="flex flex-wrap gap-4 justify-center md:justify-start">
          <a href="#" class="bg-pink-500 hover:bg-pink-600 active:bg-pink-700 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800">
            Register Now
          </a>
          <a href="#" class="bg-mint-400 hover:bg-mint-500 active:bg-mint-600 dark:bg-mint-500 dark:hover:bg-mint-600 dark:active:bg-mint-700 text-gray-800 dark:text-gray-200 font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
            Learn More
          </a>
        </div>
        <div class="mt-8 flex flex-wrap justify-center md:justify-start -space-x-2 overflow-hidden">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Attendee 2">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Attendee 3">
          <span class="flex h-10 w-10 rounded-full bg-pink-300 dark:bg-pink-700 items-center justify-center text-sm font-medium text-pink-700 dark:text-pink-300 ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125">+99</span>
        </div>
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
      <div class="w-full md:w-1/2 lg:w-2/5 order-2 md:order-1">
        <img src="https://picsum.photos/600/400?random=2" alt="Speaker Panel" class="rounded-2xl shadow-lg ring-4 ring-mint-300 dark:ring-mint-700 group-hover:ring-mint-400 dark:group-hover:ring-mint-600 transition-all duration-300 transform group-hover:scale-105">
      </div>
      <div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left order-1 md:order-2">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-mint-600 dark:text-mint-400 mb-4 lg:mb-6 leading-tight group-hover:text-mint-700 dark:group-hover:text-mint-300 transition-colors duration-300">
          Meet Our Star Speakers
        </h2>
        <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
          Learn from the industry's best! Our lineup features world-renowned chocolatiers and confectionary entrepreneurs.
        </p>
        <ul class="list-none p-0 space-y-3 mb-6 lg:mb-8 text-gray-700 dark:text-gray-300">
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" 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="M5 13l4 4L19 7"></path></svg>
            Chef Isabella "Sugar Plum" Rossi
          </li>
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" 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="M5 13l4 4L19 7"></path></svg>
            Dr. Alan "Cocoa" Bean
          </li>
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" 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="M5 13l4 4L19 7"></path></svg>
            Ms. Candice "Candy" Cane, CEO
          </li>
        </ul>
        <a href="#" class="bg-mint-500 hover:bg-mint-600 active:bg-mint-700 dark:bg-mint-600 dark:hover:bg-mint-700 dark:active:bg-mint-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
          View All Speakers
        </a>
      </div>
    </div>

  </div>

  <!-- Navigation Dots (Pure HTML, so they just stand for visual indication) -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
    <span class="block w-3 h-3 rounded-full bg-pink-500 dark:bg-pink-400 ring-2 ring-pink-700 dark:ring-pink-200 transform transition-all duration-300 group-hover:scale-125"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125 hidden sm:block"></span>
  </div>

  <!-- Navigation Arrows (Pure HTML, so they just stand for visual indication) -->
  <button class="absolute top-1/2 left-4 md:left-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700 
                 text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
    <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 md:right-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700 
                 text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
    <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>

</div>


<style>
  /* This is just to illustrate the effect for a single-page HTML. */
  /* In a real scenario, the 'transform: translateX' on .flex would be controlled by JavaScript. */
  /* If you want to show a specific slide, you'd apply a style like transform: translateX(-100%) for the second slide */
  /* Or, you can just duplicate the carousel wrapper and show one slide at a time for static display */
  /* For this specific requirement, I am demonstrating two possible slide contents within the single carousel wrapper div, */
  /* implying that JS would handle the `translateX` for actual sliding. */
  /* The 'group' utility on the parent div is used for hover effects that propagate to children. */

  :root {
    --color-mint-400: #99F6E4; /* Tailwind mint-400 */
    --color-mint-500: #4FC0B2; 
    --color-mint-600: #2BB6AB;
    --color-mint-700: #1B8C86; /* Tailwind mint-700 */
  }

  .bg-mint-400 { background-color: var(--color-mint-400); }
  .hover\:bg-mint-500:hover { background-color: var(--color-mint-500); }
  .active\:bg-mint-600:active { background-color: var(--color-mint-600); }
  .dark\:bg-mint-500 { background-color: var(--color-mint-500); }
  .dark\:hover\:bg-mint-600:hover { background-color: var(--color-mint-600); }
  .dark\:active\:bg-mint-700:active { background-color: var(--color-mint-700); }

  .focus\:ring-mint-300:focus { box-shadow: 0 0 0 4px var(--color-mint-400) !important; }
  .dark\:focus\:ring-mint-800:focus { box-shadow: 0 0 0 4px var(--color-mint-700) !important; }

  .text-mint-600 { color: var(--color-mint-600); }
  .dark\:text-mint-400 { color: var(--color-mint-400); }
  .group-hover\:text-mint-700:hover { color: var(--color-mint-700); }
  .dark\:group-hover\:text-mint-300:hover { color: var(--color-mint-400); }

  .ring-mint-300 { border-color: var(--color-mint-400); }
  .dark\:ring-mint-700 { border-color: var(--color-mint-700); }
  .group-hover\:ring-mint-400:hover { border-color: var(--color-mint-500); }
  .dark\:group-hover\:ring-mint-600:hover { border-color: var(--color-mint-600); }
  .text-mint-500 { color: var(--color-mint-500); }
  .dark\:text-mint-400 { color: var(--color-mint-400); }

</style>