ArtDeco_JobCard

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-zinc-950 min-h-screen font-serif flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-amber-100 to-yellow-200 dark:from-zinc-800 dark:to-zinc-900 shadow-xl rounded-lg overflow-hidden border-2 border-amber-300 dark:border-zinc-700 relative transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <!-- Geometric top border/pattern -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 via-yellow-500 to-orange-400 dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700 flex justify-between items-center px-2">
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
    </div>
    
    <div class="p-6 pt-10 sm:p-8 sm:pt-12 relative">
      <!-- Company Logo & Title -->
      <div class="flex items-center mb-4 sm:mb-6">
        <img src="https://picsum.photos/60/60?random=1" alt="Company Logo" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-amber-500 dark:border-zinc-600 shadow-md flex-shrink-0">
        <div class="ml-4">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-wide">Elegant Solutions LLC</h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Innovating the Future</p>
        </div>
      </div>

      <!-- Job Title -->
      <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-700 dark:text-orange-300 mb-4 tracking-tight leading-tight">
        Senior UI/UX Designer
      </h2>

      <!-- Job Details Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3 gap-x-6 text-sm sm:text-base mb-6 text-gray-700 dark:text-gray-200">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          New York, NY (Remote-friendly)
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.549l-.079.079a49.356 49.356 0 01-1.638 1.187.7.7 0 00-.05.088c-.2.32-.455.653-.746.939-.466.45-.873.862-1.228 1.207-.63.605-1.125 1.103-1.477 1.439L14 16h-3.484c-.078.077-.162.147-.25.21V4.283a2 2 0 01-.064-.094l-.105-.147-.09-.126a1.996 1.996 0 01-.035-.045L9 3V2a1 1 0 00-1-1h-.5C6.723 1 6 1.723 6 2.5V3a1 1 0 00-1 1v1H3a1 1 0 00-1 1v2a1 1 0 001 1h16a1 1 0 001-1V8a1 1 0 00-1-1zm6 0h-2V5a1 1 0 011-1h0a1 1 0 011 1v1z" clip-rule="evenodd" />
          </svg>
          Full-time
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 002-2V4H4zm10 12a2 2 0 002-2v-4a2 2 0 00-2-2H4a2 2 0 00-2 2v4a2 2 0 002 2h10z" clip-rule="evenodd" />
          </svg>
          $90k - $120k / year
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd" />
          </svg>
          Posted 2 days ago
        </div>
      </div>

      <!-- Call to Action Button -->
      <div class="text-center">
        <button class="px-8 py-3 bg-amber-600 hover:bg-amber-700 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-full shadow-md tracking-wider transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-orange-500">
          Apply Now
        </button>
      </div>
    </div>

    <!-- Art Deco bottom pattern/footer -->
    <div class="bg-gradient-to-r from-amber-400 via-yellow-500 to-orange-400 dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700 h-4 absolute bottom-0 left-0 right-0 flex justify-between items-center px-2">
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
    </div>
  </div>
</div>