ArtDeco_JobCard
Un composant de carte de travail simple et réactif avec une esthétique Art déco, des couleurs rétro sourdes et une prise en charge du mode sombre, adapté aux sites d’emploi ou aux plateformes de carrière.
HTML Code
<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>Composants associés
Composante des composantes interactives
Un composant interactif de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre.
Volet interactif sur les médias sociaux
Un composant complexe de médias sociaux avec une palette de couleurs forêt/vert avec des effets de néon/lueur, adapté aux flux interactifs avec plusieurs éléments. Comprend la conception réactive et la prise en charge du mode sombre.
Composante des composantes interactives
Un composant CRM/Business Tools avec un style de design Memphis, avec une palette de couleurs monochromatiques, des éléments interactifs et la prise en charge du mode sombre. Conçu pour une complexité modérée avec des couleurs vives, des formes géométriques et des motifs ludiques.