Tabs Component - Job/Career

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-xl overflow-hidden">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <nav class="-mb-px flex space-x-0 sm:space-x-4 md:space-x-6 text-sm sm:text-base md:text-lg" aria-label="Tabs">
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 font-medium text-purple-600 dark:text-purple-400 border-purple-500 dark:border-purple-400 whitespace-nowrap hover:text-purple-700 dark:hover:text-purple-300 transition duration-200 ease-in-out" aria-current="page">
          <span class="block">Available Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Applied Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Saved Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Interviews</span>
        </a>
      </nav>
    </div>

    <div class="p-4 sm:p-6 md:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-6">Available Job Listings</h2>
      <div class="grid gap-6">

        <!-- Job Card 1 -->
        <div class="bg-violet-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-violet-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-violet-800 dark:text-violet-300">Senior Frontend Developer</h3>
              <p class="text-gray-600 dark:text-gray-400">Acme Corporation - San Francisco, CA</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Full-time, Remote-friendly</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-100">
                New
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$120k - $150k</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">We are looking for a highly skilled Senior Frontend Developer to join our dynamic team. You will be responsible for building cutting-edge web applications using modern JavaScript frameworks...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">React</span>
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">TypeScript</span>
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">Tailwind CSS</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

        <!-- Job Card 2 -->
        <div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-blue-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-300">Product Manager, AI/ML</h3>
              <p class="text-gray-600 dark:text-gray-400">GlobalTech Inc. - Seattle, WA</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Full-time</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-100">
                Hot
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$130k - $170k</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">Seeking an experienced Product Manager with a strong background in AI/ML to lead our next-generation product initiatives. You will work closely with engineering, design, and research teams...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Product Management</span>
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Artificial Intelligence</span>
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Machine Learning</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

        <!-- Job Card 3 -->
        <div class="bg-pink-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-pink-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-pink-800 dark:text-pink-300">UI/UX Designer</h3>
              <p class="text-gray-600 dark:text-gray-400">Creative Solutions - New York, NY</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Contract, On-site</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100">
                Urgent
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$70/hr - $90/hr</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">Join our team as a UI/UX Designer to craft intuitive and beautiful user experiences. You will be responsible for the full design process from wireframing to high-fidelity prototypes...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">Figma</span>
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">User Research</span>
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">Prototyping</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

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