Componente de tarjeta de trabajo análogo skeuomórfico
Un componente de tarjeta de trabajo receptivo con un estilo de diseño esqueuomórfico, que utiliza un esquema de color análogo, adecuado para bolsas de trabajo y plataformas de desarrollo profesional. Incluye soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con microinteracciones, diseño monocromático y compatibilidad con temas oscuros.
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo diseñado con elementos 3D y una combinación de colores vibrantes, que incorpora un tema oscuro para el blog y el consumo de contenido. Presenta una complejidad media con elementos interactivos para la participación del usuario.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con microinteracciones en tonos tierra, que proporciona soporte de tema oscuro para la exhibición de portafolios.