Composant de carte de travail analogue skeuomorphe
Un composant de carte de travail réactif avec un style de conception skeuomorphe, utilisant une palette de couleurs analogue, adapté aux sites d’emploi et aux plateformes de développement de carrière. Inclut la prise en charge du mode sombre.
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>Composants associés
Composant Cartes de produit
Un composant de cartes produit réactif conçu dans un style brutaliste avec Tailwind CSS, avec prise en charge du thème sombre et utilisant des images de remplacement.
Composant Cartes de produit
Composant de cartes de produit avec conception 3D, effets réactifs et prise en charge du thème sombre.
Composant Cartes de produits
Un composant de carte produit réactif avec un style de conception Skeuomorphism, une palette de couleurs de terre et des interactions complexes, adapté à un portefeuille. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.