Composant de galerie de produits
Un composant de galerie de produits simple et réactif avec un style de conception glassmorphism, une palette de couleurs noir et blanc avec un accent vif, adapté aux sites d’emploi ou aux plateformes de carrière. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto py-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">
Featured Opportunities
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job1/600/400" alt="Software Engineer Job">
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Senior Software Engineer
<span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Acme Corp</span>
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
We are looking for an experienced Software Engineer to join our growing team. You will be responsible for designing and developing high-quality software solutions.
</p>
<div class="flex items-center justify-between text-sm mb-4">
<span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
<span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Remote</span>
</div>
<a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
Apply Now
</a>
</div>
</div>
<!-- Product Card 2 -->
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job2/600/400" alt="Marketing Manager Job">
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Digital Marketing Manager
<span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Global Solutions Inc.</span>
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
Join our dynamic marketing team and lead our digital strategy. We need someone passionate about driving online growth and brand awareness.
</p>
<div class="flex items-center justify-between text-sm mb-4">
<span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Hybrid</span>
<span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> New York, USA</span>
</div>
<a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
Apply Now
</a>
</div>
</div>
<!-- Product Card 3 -->
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job3/600/400" alt="UX Designer Job">
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
UX/UI Designer
<span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Creative Minds Studio</span>
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
Shape user experiences with us! We're seeking a talented UX/UI Designer to craft intuitive and beautiful interfaces.
</p>
<div class="flex items-center justify-between text-sm mb-4">
<span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
<span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> London, UK</span>
</div>
<a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
Apply Now
</a>
</div>
</div>
<!-- Product Card 4 -->
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job4/600/400" alt="Data Scientist Job">
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Data Scientist
<span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Data Insights Co.</span>
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
Unlock insights from complex data sets. We are looking for a Data Scientist to build predictive models and analyze trends.
</p>
<div class="flex items-center justify-between text-sm mb-4">
<span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Remote</span>
<span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Anywhere</span>
</div>
<a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
Apply Now
</a>
</div>
</div>
<!-- Product Card 5 -->
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job5/600/400" alt="Project Manager Job">
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Project Manager
<span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Innovate Solutions LLC</span>
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
Oversee key projects from conception to completion. We need a meticulous Project Manager with excellent organizational skills.
</p>
<div class="flex items-center justify-between text-sm mb-4">
<span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
<span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Berlin, DE</span>
</div>
<a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
Apply Now
</a>
</div>
</div>
<!-- Product Card 6 -->
<div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job6/600/400" alt="Content Writer Job">
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Senior Content Writer
<span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Content Hub</span>
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
Craft compelling stories and engage audiences. We are seeking a creative Senior Content Writer to elevate our brand messaging.
</p>
<div class="flex items-center justify-between text-sm mb-4">
<span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Part-time</span>
<span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Online</span>
</div>
<a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
Apply Now
</a>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif avec une esthétique de conception matérielle, avec une mise en page basée sur une grille et des éléments interactifs adaptés à la présentation de produits ou d’un portefeuille. Inclut la prise en charge du mode sombre et utilise un schéma de couleurs analogue.
Composant de galerie de produits
Un composant de galerie de produits avec des micro-interactions.
ProductGalleryComponent
Galerie de produits Composant au design brutaliste, prise en charge réactive et en mode sombre.