Componente della galleria dei prodotti
Un componente semplice e reattivo per la galleria di prodotti con uno stile di design glassmorphism, combinazione di colori in bianco e nero con un accento brillante, adatto per bacheche di lavoro o piattaforme di carriera. Include il supporto per la modalità oscura.
Codice HTML
<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>Componenti correlati
Componente della galleria dei prodotti
Componente della galleria dei prodotti reattivo con supporto per il tema scuro, stile Material Design, combinazione di colori dei toni della terra, complessità semplice, per scopi di e-commerce.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per l'interfaccia utente in modalità scura, con colori complementari, adatto per le interfacce di rete dei social media.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per la modalità scura, con immagini e avatar con Tailwind CSS.