Skeuomorphic Analogous Job Card Component
A responsive job card component with a skeuomorphic design style, using an analogous color scheme, suitable for job boards and career development platforms. Includes dark mode support.
HTML Code
<div class="p-4 sm:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-800 dark:via-gray-900 dark:to-black min-h-screen flex items-center justify-center font-sans">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-7xl">
<!-- Job Card 1 -->
<div class="relative rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
border-t border-l border-indigo-200 dark:border-gray-600
before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">
<div class="relative p-6 space-y-4">
<!-- Top Section - Company Logo & Title -->
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/68/100/100" alt="Company Logo">
<div>
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Senior UX Designer</h3>
<p class="text-md text-purple-700 dark:text-purple-400">Acme Inc.</p>
</div>
</div>
<!-- Job Details -->
<div class="space-y-2 text-indigo-700 dark:text-indigo-200">
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636m11.314 11.314L12.757 13.973a1.998 1.998 0 00-2.828 0L5.636 12.586A".fill-rule="evenodd" clip-rule="evenodd"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
Remote
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
Full-time
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Posted 2 days ago
</p>
</div>
<!-- Salary Range -->
<p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$90,000 - $120,000 / year</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">UX Design</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Figma</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Research</span>
</div>
<!-- Apply Button -->
<button class="w-full py-3 rounded-lg text-lg font-bold
bg-gradient-to-br from-indigo-500 to-purple-600 text-white
shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
relative overflow-hidden group">
<span class="relative z-10">Apply Now</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
</button>
</div>
</div>
<!-- Job Card 2 -->
<div class="relative rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
border-t border-l border-indigo-200 dark:border-gray-600
before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">
<div class="relative p-6 space-y-4">
<!-- Top Section - Company Logo & Title -->
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/88/100/100" alt="Company Logo">
<div>
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Marketing Manager</h3>
<p class="text-md text-purple-700 dark:text-purple-400">Global Solutions</p>
</div>
</div>
<!-- Job Details -->
<div class="space-y-2 text-indigo-700 dark:text-indigo-200">
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
Hybrid (NYC)
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
Full-time
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Posted 5 days ago
</p>
</div>
<!-- Salary Range -->
<p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$75,000 - $100,000 / year</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Digital Marketing</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">SEO</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Content</span>
</div>
<!-- Apply Button -->
<button class="w-full py-3 rounded-lg text-lg font-bold
bg-gradient-to-br from-indigo-500 to-purple-600 text-white
shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
relative overflow-hidden group">
<span class="relative z-10">Apply Now</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
</button>
</div>
</div>
<!-- Job Card 3 -->
<div class="relative rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
border-t border-l border-indigo-200 dark:border-gray-600
before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">
<div class="relative p-6 space-y-4">
<!-- Top Section - Company Logo & Title -->
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/98/100/100" alt="Company Logo">
<div>
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Frontend Developer</h3>
<p class="text-md text-purple-700 dark:text-purple-400">Tech Innovators</p>
</div>
</div>
<!-- Job Details -->
<div class="space-y-2 text-indigo-700 dark:text-indigo-200">
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
On-site (London)
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
Full-time
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Posted 1 week ago
</p>
</div>
<!-- Salary Range -->
<p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$80,000 - $110,000 / year</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">React</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Tailwind CSS</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">JavaScript</span>
</div>
<!-- Apply Button -->
<button class="w-full py-3 rounded-lg text-lg font-bold
bg-gradient-to-br from-indigo-500 to-purple-600 text-white
shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
relative overflow-hidden group">
<span class="relative z-10">Apply Now</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
</button>
</div>
</div>
</div>
</div>Related Components
Product Cards Component
A responsive product card component with 3D design, analogous color scheme, and dark mode support, designed for social media interfaces.
Product Cards Component with Dark Mode UI
Product Cards Component with Dark Mode UI and responsive effects using Tailwind CSS.
Product Cards Component
A simple e-commerce product card component designed in Material Design style using a grayscale color scheme and responsive design with dark theme support.