Komponente "Interaktive Komponenten"

<div class="min-h-screen py-12 flex items-center justify-center bg-gradient-to-br from-orange-50 to-amber-200 dark:from-gray-900 dark:to-gray-800 transition-all duration-500">
  <div class="container mx-auto px-4 max-w-6xl">

    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-orange-900 dark:text-amber-300 mb-4 leading-tight">
        Explore Interactive Learning
      </h2>
      <p class="text-lg text-orange-800 dark:text-gray-300 max-w-2xl mx-auto">
        Dive into engaging course modules with a focus on active participation and visual feedback.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Interactive Card 1 -->
      <div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 focus-within:-translate-y-2 outline-none" tabindex="0" role="button" aria-label="Explore Module 1: Foundational Concepts">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <div class="bg-white/70 dark:bg-gray-900/70 p-4 rounded-full mb-4 shadow-md transition-all duration-300 group-hover:scale-110 group-focus-within:scale-110">
            <svg class="h-12 w-12 text-orange-600 dark:text-amber-400 group-hover:text-white group-focus-within:text-white transition-colors duration-300" 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.75 17L9.25 17L6 17M15 17L15 17L18 17M12 17L12 17M12 8V7M12 12V11M12 16V15M17 12H16M13 12H12M8 12H7M12 4a2 2 0 100-4 2 2 0 000 4zM12 20a2 2 0 100-4 2 2 0 000 4zM20 12a2 2 0 100-4 2 2 0 000 4zM4 12a2 2 0 100-4 2 2 0 000 4z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold text-orange-900 dark:text-white mb-2 transition-colors duration-300 group-hover:text-white group-focus-within:text-white">
            <a href="#" class="outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-orange-500 rounded-md block">
              Module 1: Foundational Concepts
            </a>
          </h3>
          <p class="text-orange-700 dark:text-gray-300 text-sm transition-colors duration-300 group-hover:text-amber-50 group-focus-within:text-amber-50 mb-4">
            Start your journey with core principles and essential building blocks.
          </p>
          <span class="text-xs font-semibold px-3 py-1 rounded-full bg-orange-100 dark:bg-gray-700 text-orange-700 dark:text-gray-200 group-hover:bg-amber-100 group-hover:text-orange-900 dark:group-hover:bg-orange-600 dark:group-hover:text-white transition-all duration-300">
            Beginner Friendly
          </span>
        </div>
      </div>

      <!-- Interactive Card 2 -->
      <div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 focus-within:-translate-y-2 outline-none" tabindex="0" role="button" aria-label="Explore Module 2: Advanced Techniques">
        <div class="absolute inset-0 bg-gradient-to-br from-rose-400 to-red-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <div class="bg-white/70 dark:bg-gray-900/70 p-4 rounded-full mb-4 shadow-md transition-all duration-300 group-hover:scale-110 group-focus-within:scale-110">
            <svg class="h-12 w-12 text-red-600 dark:text-rose-400 group-hover:text-white group-focus-within:text-white transition-colors duration-300" 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold text-orange-900 dark:text-white mb-2 transition-colors duration-300 group-hover:text-white group-focus-within:text-white">
            <a href="#" class="outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 rounded-md block">
              Module 2: Advanced Techniques
            </a>
          </h3>
          <p class="text-orange-700 dark:text-gray-300 text-sm transition-colors duration-300 group-hover:text-rose-50 group-focus-within:text-rose-50 mb-4">
            Master complex methodologies and elevate your skills to the next level.
          </p>
          <span class="text-xs font-semibold px-3 py-1 rounded-full bg-rose-100 dark:bg-gray-700 text-rose-700 dark:text-gray-200 group-hover:bg-red-100 group-hover:text-red-900 dark:group-hover:bg-red-600 dark:group-hover:text-white transition-all duration-300">
            Intermediate Level
          </span>
        </div>
      </div>

      <!-- Interactive Card 3 -->
      <div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 focus-within:-translate-y-2 outline-none" tabindex="0" role="button" aria-label="Explore Module 3: Project Applications">
        <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-amber-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <div class="bg-white/70 dark:bg-gray-900/70 p-4 rounded-full mb-4 shadow-md transition-all duration-300 group-hover:scale-110 group-focus-within:scale-110">
            <svg class="h-12 w-12 text-amber-600 dark:text-yellow-400 group-hover:text-white group-focus-within:text-white transition-colors duration-300" 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.663 17h4.673M12 20v-3m0 0l4.038 2.219M12 17l-4.038 2.219M9.663 17A9.001 9.001 0 0012 21a9.001 9.001 0 002.337-4H9.663zM17.5 11H6.5a2 2 0 01-2-2V6a2 2 0 012-2h11a2 2 0 012 2v3a2 2 0 01-2 2z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold text-orange-900 dark:text-white mb-2 transition-colors duration-300 group-hover:text-white group-focus-within:text-white">
            <a href="#" class="outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-yellow-500 rounded-md block">
              Module 3: Project Applications
            </a>
          </h3>
          <p class="text-orange-700 dark:text-gray-300 text-sm transition-colors duration-300 group-hover:text-yellow-50 group-focus-within:text-yellow-50 mb-4">
            Apply your knowledge to real-world projects and build a strong portfolio.
          </p>
          <span class="text-xs font-semibold px-3 py-1 rounded-full bg-yellow-100 dark:bg-gray-700 text-yellow-700 dark:text-gray-200 group-hover:bg-amber-100 group-hover:text-amber-900 dark:group-hover:bg-yellow-600 dark:group-hover:text-white transition-all duration-300">
            Project Focus
          </span>
        </div>
      </div>

    </div>
  </div>
</div>