Skeuomorphe analoge Jobkartenkomponente
Eine reaktionsschnelle Jobkartenkomponente mit einem skeuomorphen Designstil unter Verwendung eines analogen Farbschemas, geeignet für Jobbörsen und Karriereentwicklungsplattformen. Enthält Unterstützung für den Dunkelmodus.
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>Verwandte Komponenten
Komponente "Produktkarten"
Eine reaktionsschnelle Produktkartenkomponente mit einem Skeuomorphismus-Designstil, einem Erdton-Farbschema und komplexen Interaktionen, die sich für ein Portfolio eignen. Es bietet Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.
Komponente "Produktkarten"
Skeuomorphic Product Cards Component für Dashboard mit responsivem Design und Unterstützung für dunkle Themen.
Skeuomorphe Produktkarte
Eine Skeuomorphic Product Card-Komponente für ein Dashboard, formatiert mit Graustufen, mittlerer Komplexität, reaktionsschnell mit Dunkelmodus.