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

<section class="relative w-full overflow-hidden bg-gray-50 dark:bg-gray-900 py-8 md:py-16 lg:py-20">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl md:text-4xl font-extrabold text-gray-800 dark:text-gray-100 text-center mb-10 md:mb-14 font-serif relative z-10">
      Explore Our Courses
      <span class="block w-24 h-1 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-2"></span>
    </h2>

    <!-- Carousel Wrapper (Static for this example as JS is not allowed) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 relative z-10">

      <!-- Carousel Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-blue-700 dark:border-blue-500">
        <img src="https://picsum.photos/400/250?random=1" alt="Course Image" class="w-full h-48 object-cover object-center">
        <div class="p-6">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm font-semibold text-yellow-700 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-800 px-3 py-1 rounded-full">New</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">24 Lessons</span>
          </div>
          <h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Foundations of Digital Marketing</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Master the essentials of online advertising, SEO, social media, and content creation to build effective digital campaigns.</p>
          <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-rose-500">
              <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Dr. Alex Turner</span>
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
              Enroll Now
              <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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Carousel Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-green-700 dark:border-green-500">
        <img src="https://picsum.photos/400/250?random=2" alt="Course Image" class="w-full h-48 object-cover object-center">
        <div class="p-6">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm font-semibold text-rose-700 dark:text-rose-400 bg-rose-100 dark:bg-rose-800 px-3 py-1 rounded-full">Trending</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">36 Lessons</span>
          </div>
          <h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Advanced Data Science with Python</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Dive deep into machine learning algorithms, statistical modeling, and big data analysis using Python libraries.</p>
          <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-blue-500">
              <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Prof. Sarah Chen</span>
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
              Enroll Now
              <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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Carousel Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-rose-700 dark:border-rose-500">
        <img src="https://picsum.photos/400/250?random=3" alt="Course Image" class="w-full h-48 object-cover object-center">
        <div class="p-6">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm font-semibold text-blue-700 dark:text-blue-400 bg-blue-100 dark:bg-blue-800 px-3 py-1 rounded-full">Popular</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">18 Lessons</span>
          </div>
          <h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Effective Business Communication</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Improve your verbal, non-verbal, and written communication skills for professional success in any industry.</p>
          <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-emerald-500">
              <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Ms. Emily White</span>
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
              Enroll Now
              <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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

    </div>

    <!-- Pagination Dots (Visual only, no JS) -->
    <div class="flex justify-center items-center space-x-3 mt-10 md:mt-14 relative z-10">
      <button type="button" class="w-3 h-3 rounded-full bg-blue-700 dark:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 1"></button>
      <button type="button" class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-blue-400 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 2"></button>
      <button type="button" class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-blue-400 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 3"></button>
    </div>

    <!-- Decorative Background Elements (Visual only) -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5">
      <svg class="w-full h-full" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <defs>
          <pattern id="retro-pattern" patternUnits="userSpaceOnUse" width="60" height="60">
            <rect x="0" y="0" width="60" height="60" fill="var(--color-bg)"/>
            <path d="M30 0L60 30L30 60L0 30Z" fill="var(--color-pattern-dark)" opacity="0.2"/>
            <rect x="15" y="15" width="30" height="30" fill="var(--color-pattern-light)" opacity="0.3"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#retro-pattern)"/>
        <style>
          .dark {
            --color-bg: #111827; /* gray-900 */
            --color-pattern-dark: #374151; /* gray-700 */
            --color-pattern-light: #4b5563; /* gray-600 */
          }
          /* Default (Light Mode) */
          :not(.dark) {
            --color-bg: #f9fafb; /* gray-50 */
            --color-pattern-dark: #d1d5db; /* gray-300 */
            --color-pattern-light: #e5e7eb; /* gray-200 */
          }
        </style>
      </svg>
    </div>

  </div>
</section>