Luxury_Job_Board_Columns_Component
Un componente di colonne monocromatiche di lusso/premium per bacheche di lavoro e piattaforme di sviluppo della carriera. Presenta un design sofisticato con una tipografia elegante, ricchi elementi dell'interfaccia, piena reattività e supporto per la modalità oscura.
Codice HTML
<div class="font-sans bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl lg:text-6xl mb-4">
Elevate Your Career Path
</h2>
<p class="mt-4 text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Discover exclusive opportunities and resources tailored for ambitious professionals seeking unparalleled growth.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Column 1: Featured Jobs -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<div class="p-8 sm:p-10">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-purple-600 dark:text-purple-400 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0A25.105 25.105 0 0112 8c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196L12 21l-7.755-4.851a.625.625 0 01-.247-.484V13.5L12 21l7.755-4.851a.625.625 0 01.247-.484V13.5z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196A23.931 23.931 0 0112 15c-3.183 0-6.22-1.28-8.452-3.527m16.904 0A25.105 25.105 0 0112 8c-3.183 0-6.22-1.28-8.452-3.527m16.904 0C18.66 11.66 16.142 10 13.5 10c-1.802 0-3.487 0.605-4.872 1.637m.005-2.196L12 21l-7.755-4.851a.625.625 0 01-.247-.484V13.5L12 21l7.755-4.851a.625.625 0 01.247-.484V13.5z" />
</svg>
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Featured Opportunities</h3>
</div>
<ul class="space-y-4 text-gray-600 dark:text-gray-300">
<li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
<svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="font-medium">Senior AI/ML Engineer <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ TechCorp</span></a>
</li>
<li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
<svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="font-medium">Director of Product Management <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ InnovateX</span></a>
</li>
<li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
<svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="font-medium">Lead UX/UI Designer <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ Creative Labs</span></a>
</li>
<li class="flex items-center group-hover:text-purple-700 dark:group-hover:text-purple-300 transition-colors duration-200">
<svg class="h-5 w-5 mr-3 text-purple-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="font-medium">Quant Research Analyst <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">@ FinancePrime</span></a>
</li>
</ul>
<div class="mt-8 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300">
View All Jobs
<svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Column 2: Career Resources -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<div class="p-8 sm:p-10">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-purple-600 dark:text-purple-400 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13.006m0-13.006a4.501 4.501 0 014.118 6.002L12 21l-4.118-8.74c.23-.974.223-1.996.002-3.003-.22-.988-.636-1.921-1.228-2.739l-.427-.61h.01M12 6.253V1h0c0 2.21-1.79 4-4 4S4 3.21 4 1h0m8 5.253a4.501 4.501 0 00-4.118 6.002L12 21l4.118-8.74c-.23-.974-.223-1.996-.002-3.003.22-.988.636-1.921 1.228-2.739l.427-.61h-.01" />
</svg>
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Career Evolution Hub</h3>
</div>
<div class="space-y-6">
<div class="flex items-start">
<img class="h-16 w-16 flex-shrink-0 rounded-lg object-cover mr-4 shadow-sm" src="https://picsum.photos/id/1018/100/100" alt="Resume Building Guide">
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Mastering Your Executive Resume</h4>
<p class="text-gray-600 dark:text-gray-400 text-sm">Download our comprehensive guide to craft a resume that stands out.</p>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 text-sm font-medium transition-colors duration-200 mt-2 inline-block">Read More →</a>
</div>
</div>
<div class="flex items-start">
<img class="h-16 w-16 flex-shrink-0 rounded-lg object-cover mr-4 shadow-sm" src="https://picsum.photos/id/1015/100/100" alt="Interview Prep">
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Acing the Leadership Interview</h4>
<p class="text-gray-600 dark:text-gray-400 text-sm">Tips and strategies for navigating complex executive interviews.</p>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 text-sm font-medium transition-colors duration-200 mt-2 inline-block">Access Now →</a>
</div>
</div>
<div class="flex items-start">
<img class="h-16 w-16 flex-shrink-0 rounded-lg object-cover mr-4 shadow-sm" src="https://picsum.photos/id/1016/100/100" alt="Networking Strategies">
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Elite Networking Strategies</h4>
<p class="text-gray-600 dark:text-gray-400 text-sm">Build a powerful professional network in your industry.</p>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 text-sm font-medium transition-colors duration-200 mt-2 inline-block">Discover →</a>
</div>
</div>
</div>
<div class="mt-8 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-purple-600 dark:border-purple-500 text-base font-medium rounded-full text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-gray-700 transition-all duration-300">
Explore All Resources
</a>
</div>
</div>
</div>
<!-- Column 3: Executive Coaching & Mentorship -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<div class="p-8 sm:p-10">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-purple-600 dark:text-purple-400 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13.5l3 3m0 0l3-3m-3 3v-6.75M9 20.25h14.25a2.25 2.25 0 002.25-2.25V6.75a2.25 2.25 0 00-2.25-2.25H9C6.709 4.5 4.5 6.709 4.5 9v9A2.25 2.25 0 006.75 20.25H9m-6.75-9.75h-.375c-1.077 0-1.95.873-1.95 1.95V20.25a2.25 2.25 0 002.25 2.25h4.5c.983 0 1.838-.415 2.455-1.072M7.5 7.5a.75.75 0 100-1.5.75.75 0 000 1.5zm-3 0a.75.75 0 100-1.5.75.75 0 000 1.5z" />
</svg>
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Executive Coaching & Mentorship</h3>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-6">Gain personalized guidance from industry leaders and certified executive coaches.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
<div class="flex items-center space-x-3">
<img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Coach John Doe">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Leadership Coach</p>
</div>
</div>
<div class="flex items-center space-x-3">
<img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Mentor Jane Smith">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Tech CEO Mentor</p>
</div>
</div>
<div class="flex items-center space-x-3">
<img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Advisor Michael Brown">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Michael Brown</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Strategy Advisor</p>
</div>
</div>
<div class="flex items-center space-x-3">
<img class="h-12 w-12 rounded-full object-cover shadow-md" src="https://randomuser.me/api/portraits/women/66.jpg" alt="Trainer Emily White">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">Emily White</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Career Trainer</p>
</div>
</div>
</div>
<div class="mt-8 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300">
Find Your Mentor
<svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Colonne
Un componente di colonne reattive con stile per la modalità scura utilizzando Tailwind CSS, con segnaposto per avatar e immagini.
Componente Colonne Brutaliste
Un componente di colonne complesso in stile brutalista, con una combinazione di colori monocromatica, adatto per il consumo di blog o contenuti. Il design presenta un contrasto elevato, layout insoliti e supporta la modalità scura.
Retro_Industrial_Columns_Component
Un componente a colonne complesso, vibrante, in stile retrò/vintage per aziende manifatturiere/industriali, caratterizzato da un'estetica anni '80/'90 con supporto alla modalità scura e piena reattività.