Interactive Components Component

<div class="font-sans bg-gradient-to-br from-pink-100 to-green-100 dark:from-gray-900 dark:to-gray-800 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-pink-700 dark:text-pink-400 mb-8 text-center drop-shadow-lg leading-tight">
      Discover Your Next Sweet Opportunity
    </h2>

    <p class="text-lg text-pink-600 dark:text-pink-300 mb-12 text-center max-w-3xl mx-auto opacity-90">
      Explore a natural flow of career possibilities. From fresh entry-level roles to seasoned leadership, your path is waiting.
    </p>

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

      <!-- Job Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-2 border-pink-200 dark:border-pink-800 transform hover:-translate-y-2 relative group">
        <div class="absolute -top-4 -right-4 bg-gradient-to-br from-pink-400 to-purple-400 dark:from-pink-600 dark:to-purple-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">New</div>
        <h3 class="text-2xl font-bold text-pink-800 dark:text-pink-300 mb-3 leading-tight">Software Engineer</h3>
        <p class="text-pink-500 dark:text-pink-400 text-md mb-4 flex items-center">
          <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
          Sparkle Tech Co. - Full-time
        </p>
        <p class="text-gray-600 dark:text-gray-400 mb-5 text-sm line-clamp-3">Design, develop, and maintain high-quality software solutions using modern frameworks. Join our innovative team!</p>

        <div class="flex flex-wrap gap-2 mb-6">
          <span class="px-3 py-1 rounded-full bg-green-200 dark:bg-green-700 text-green-700 dark:text-green-300 text-xs font-semibold">React</span>
          <span class="px-3 py-1 rounded-full bg-purple-200 dark:bg-purple-700 text-purple-700 dark:text-purple-300 text-xs font-semibold">Node.js</span>
          <span class="px-3 py-1 rounded-full bg-blue-200 dark:bg-blue-700 text-blue-700 dark:text-blue-300 text-xs font-semibold">AWS</span>
        </div>

        <a href="#" class="block w-full text-center bg-gradient-to-r from-pink-500 to-purple-500 dark:from-pink-600 dark:to-purple-600 text-white py-3 px-6 rounded-full font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 ease-in-out">
          Apply Now
        </a>
      </div>

      <!-- Job Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-2 border-green-200 dark:border-green-800 transform hover:-translate-y-2 relative group">
        <h3 class="text-2xl font-bold text-green-800 dark:text-green-300 mb-3 leading-tight">Product Manager</h3>
        <p class="text-green-500 dark:text-green-400 text-md mb-4 flex items-center">
          <svg class="w-5 h-5 mr-2 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
          Innovation Hub - Remote
        </p>
        <p class="text-gray-600 dark:text-gray-400 mb-5 text-sm line-clamp-3">Drive product strategy and roadmap through market research and user feedback. Shape the future with us!</p>

        <div class="flex flex-wrap gap-2 mb-6">
          <span class="px-3 py-1 rounded-full bg-pink-200 dark:bg-pink-700 text-pink-700 dark:text-pink-300 text-xs font-semibold">Strategy</span>
          <span class="px-3 py-1 rounded-full bg-orange-200 dark:bg-orange-700 text-orange-700 dark:text-orange-300 text-xs font-semibold">UX/UI</span>
          <span class="px-3 py-1 rounded-full bg-teal-200 dark:bg-teal-700 text-teal-700 dark:text-teal-300 text-xs font-semibold">Agile</span>
        </div>

        <a href="#" class="block w-full text-center bg-gradient-to-r from-green-500 to-blue-500 dark:from-green-600 dark:to-blue-600 text-white py-3 px-6 rounded-full font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 ease-in-out">
          Apply Now
        </a>
      </div>

      <!-- Job Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-2 border-purple-200 dark:border-purple-800 transform hover:-translate-y-2 relative group">
        <h3 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-3 leading-tight">Marketing Specialist</h3>
        <p class="text-purple-500 dark:text-purple-400 text-md mb-4 flex items-center">
          <svg class="w-5 h-5 mr-2 text-pink-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
          Bloom Creative - Hybrid
        </p>
        <p class="text-gray-600 dark:text-gray-400 mb-5 text-sm line-clamp-3">Execute comprehensive marketing campaigns across digital and traditional channels. Grow with our vibrant team!</p>

        <div class="flex flex-wrap gap-2 mb-6">
          <span class="px-3 py-1 rounded-full bg-cyan-200 dark:bg-cyan-700 text-cyan-700 dark:text-cyan-300 text-xs font-semibold">SEO</span>
          <span class="px-3 py-1 rounded-full bg-fuchsia-200 dark:bg-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-300 text-xs font-semibold">Social Media</span>
          <span class="px-3 py-1 rounded-full bg-lime-200 dark:bg-lime-700 text-lime-700 dark:text-lime-300 text-xs font-semibold">Content</span>
        </div>

        <a href="#" class="block w-full text-center bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-600 dark:to-pink-600 text-white py-3 px-6 rounded-full font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 ease-in-out">
          Apply Now
        </a>
      </div>

    </div>

    <!-- Call to Action / Explore More -->
    <div class="mt-16 text-center">
      <a href="#" class="inline-flex items-center justify-center px-10 py-4 border-4 border-transparent text-lg font-extrabold rounded-full shadow-lg
        text-pink-700 bg-white hover:bg-pink-50 transition-colors duration-300 ease-in-out
        dark:text-pink-300 dark:bg-gray-800 dark:hover:bg-gray-700 group
        relative overflow-hidden
        before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-pink-400 before:to-green-400 before:opacity-0 before:transition-opacity before:duration-500 before:ease-in-out before:z-0
        hover:before:opacity-100
        hover:text-white dark:hover:text-white
      ">
        <span class="relative z-10">Explore All Sweet Roles</span>
        <svg class="ml-3 w-5 h-5 relative z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-in-out transform -translate-x-5 group-hover:translate-x-0" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
      </a>
    </div>
  </div>
</div>