Luxury_Job_Board_Columns_Component
Un composant de colonne monochromatique de luxe / premium pour les sites d’emploi et les plateformes de développement de carrière. Il présente un design sophistiqué avec une typographie élégante, des éléments d’interface riches, une réactivité totale et une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Brutalism_Portfolio_Columns_Component
Un composant de portfolio multi-colonnes d’inspiration brutaliste avec des couleurs sourdes, avec une grande typographie, des bordures à contraste élevé et des mises en page asymétriques. Inclut la prise en charge du mode sombre et présente des projets avec des titres, des descriptions et des images.
Neumorphisme des composants des colonnes
Neumorphisme des composants de colonnes - Un style d’interface utilisateur souple qui crée des éléments semblant extruder de l’arrière-plan à l’aide d’ombres subtiles. Ce composant est réactif et prend en charge le thème sombre. Aucun code JavaScript n’est nécessaire. Pour le mode sombre, la prise en charge CSS est suffisante.
Composant Colonnes
Un composant de colonnes réactives avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.