カルーセルスライダーコンポーネント

<div class="relative w-full max-w-7xl mx-auto py-8 px-4 dark:bg-gray-900 bg-white sm:px-6 lg:px-8">
  <!-- Carousel Header -->
  <div class="flex items-center justify-between mb-8">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
      Latest Headlines
    </h2>
    <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      View All
      <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
      </svg>
    </a>
  </div>

  <!-- Carousel Container (Simplified for static HTML, requires JS for actual carousel functionality) -->
  <!-- In a real scenario, this would be a JS-controlled carousel. For this HTML-only component, we'll show a responsive grid layout that implies a carousel structure. -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Carousel Item 1 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=1" alt="News Article 1" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Technology
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            Breakthrough in AI Research Announced
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          Researchers at the leading global institute have unveiled a groundbreaking development in artificial intelligence, promising to revolutionize several industries.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
            Jane Doe
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Editor</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

    <!-- Carousel Item 2 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=2" alt="News Article 2" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Politics
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            Global Leaders Discuss Climate Change at Summit
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          Heads of state convened today for a critical summit to address the escalating climate crisis and pledge new initiatives.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
            John Smith
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Reporter</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

    <!-- Carousel Item 3 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=3" alt="News Article 3" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Health
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            New Study Reveals Benefits of Mediterranean Diet
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          A comprehensive new study has provided compelling evidence regarding the significant health benefits associated with adhering to a Mediterranean diet.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            David Lee
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Correspondent</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

  </div>

  <!-- Pagination/Navigation (Placeholder for a real carousel) -->
  <div class="mt-12 flex justify-center space-x-2">
    <button aria-label="Previous slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </button>
    <span class="sr-only">Current slide: 1</span>
    <button aria-label="Slide 1" class="w-3 h-3 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-transparent ring-offset-2 ring-offset-gray-900 focus:outline-none focus:ring-gray-500"></button>
    <button aria-label="Slide 2" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
    <button aria-label="Slide 3" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
    <button aria-label="Next slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</div>