Composant de colonnes de fabrication d’entreprise/professionnel
Un composant de colonnes complexe et réactif conçu pour les entreprises manufacturières/industrielles avec une esthétique d’entreprise/professionnelle et une palette de couleurs automnale. Inclut la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<section class="py-12 bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-orange-800 dark:text-orange-300 mb-4 tracking-tight">
Driving Industrial Innovation
</h2>
<p class="text-lg sm:text-xl text-brown-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
Leading the future of manufacturing with precision, efficiency, and unwavering commitment to quality.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">
<!-- Column 1: Advanced Automation -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-orange-600 dark:border-orange-500">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-orange-600 dark:bg-orange-500 rounded-full shadow-lg">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1.5-1.5M15 17l.75 3L17 18.5M2.25 10.5l1.5 5.25L5.75 10.5M9 6h6M19.5 10.5l-1.5 5.25L16.25 10.5M12 21a9 9 0 100-18 9 9 0 000 18z" />
</svg>
</div>
<div class="pt-8">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors duration-300">
Advanced Automation
</h3>
<p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
Leveraging cutting-edge robotics and AI to optimize production workflows and reduce operational costs.
</p>
<img src="https://picsum.photos/400/250?random=1" alt="Industrial robots" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
<li>Robotic Process Automation (RPA)</li>
<li>Machine Learning for Predictive Maintenance</li>
<li>Automated Quality Control Systems</li>
</ul>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-md">
Learn More
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</a>
</div>
</div>
<!-- Column 2: Sustainable Manufacturing -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-burgundy-700 dark:border-burgundy-600">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-burgundy-700 dark:bg-burgundy-600 rounded-full shadow-lg">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.5l4 4L19.5 6" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="pt-8">
<h3 class="text-2xl font-bold text-burgundy-800 dark:text-burgundy-200 mb-3 group-hover:text-burgundy-600 dark:group-hover:text-burgundy-400 transition-colors duration-300">
Sustainable Manufacturing
</h3>
<p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
Pioneering eco-friendly production methods to minimize environmental impact and foster a greener future.
</p>
<img src="https://picsum.photos/400/250?random=2" alt="Eco-friendly factory" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
<li>Renewable Energy Integration</li>
<li>Waste Reduction & Recycling Programs</li>
<li>Carbon Footprint Optimization</li>
</ul>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-700 hover:bg-burgundy-800 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 transition-colors duration-300 shadow-md">
Explore Initiatives
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</a>
</div>
</div>
<!-- Column 3: Global Supply Chain Excellence -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-brown-700 dark:border-brown-600">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-brown-700 dark:bg-brown-600 rounded-full shadow-lg">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="pt-8">
<h3 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-3 group-hover:text-brown-600 dark:group-hover:text-brown-400 transition-colors duration-300">
Global Supply Chain Excellence
</h3>
<p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
Building resilient and efficient supply networks to ensure timely delivery and consistent product availability.
</p>
<img src="https://picsum.photos/400/250?random=3" alt="Global logistics network" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
<li>Real-time Logistics Tracking</li>
<li>Supplier Relationship Management</li>
<li>Risk Mitigation Strategies</li>
</ul>
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brown-700 hover:bg-brown-800 dark:bg-brown-600 dark:hover:bg-brown-700 transition-colors duration-300 shadow-md">
Discover Our Reach
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-800 hover:bg-burgundy-900 dark:bg-burgundy-700 dark:hover:bg-burgundy-800 transition-colors duration-300 shadow-lg sm:text-xl">
Contact Our Experts
<svg class="ml-3 -mr-1 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H8a2 2 0 00-2 2v6a2 2 0 002 2h9a2 2 0 002-2v-6a2 2 0 00-2-2zM9 11a1 1 0 100 2h6a1 1 0 100-2H9z" />
</svg>
</a>
</div>
</div>
</section>
<style>
/* Custom colors for autumn palette */
.text-brown-700 { color: #8B4513; } /* SaddleBrown */
.dark\:text-brown-200 { color: #D2B48C; } /* Tan light for dark mode */
.dark\:text-brown-400 { color: #A0522D; } /* Sienna light for dark mode hover */
.bg-brown-700 { background-color: #A0522D; } /* Sienna */
.hover\:bg-brown-800:hover { background-color: #8B4513; } /* SaddleBrown for hover */
.dark\:bg-brown-600 { background-color: #D2B48C; } /* Tan */
.dark\:hover\:bg-brown-700:hover { background-color: #A0522D; } /* Sienna for dark hover */
.text-burgundy-700 { color: #800020; } /* Burgundy */
.text-burgundy-800 { color: #6A0527; } /* slightly darker burgundy */
.dark\:text-burgundy-200 { color: #EDC1C1; } /* light pink for dark mode */
.dark\:text-burgundy-400 { color: #EC2E5F; } /* medium pink for dark hover */
.bg-burgundy-700 { background-color: #800020; } /* Burgundy */
.hover\:bg-burgundy-800:hover { background-color: #6A0527; } /* slightly darker burgundy for hover */
.dark\:bg-burgundy-600 { background-color: #C04000; } /* Burnt Orange */
.dark\:hover\:bg-burgundy-700:hover { background-color: #800020; } /* Burgundy for dark hover */
.text-orange-800 { color: #CC5500; } /* Dark Orange */
.dark\:text-orange-200 { color: #FFDAB9; } /* PeachPuff for dark */
.dark\:text-orange-300 { color: #FFC0CB; } /* LightPink for dark heading */
.dark\:text-orange-400 { color: #FFB347; } /* Light Orange for dark hover */
.bg-orange-700 { background-color: #FF8c00; } /* DarkOrange */
.hover\:bg-orange-800:hover { background-color: #CC5500; } /* Darker Orange for hover */
.dark\:bg-orange-600 { background-color: #FFA07A; } /* LightSalmon light for dark */
.dark\:hover\:bg-orange-700:hover { background-color: #FF8c00; } /* DarkOrange light for dark hover */
.border-orange-600 { border-color: #FF8c00; }
.dark\:border-orange-500 { border-color: #FFA07A; }
.border-burgundy-700 { border-color: #800020; }
.dark\:border-burgundy-600 { border-color: #C04000; }
.border-brown-700 { border-color: #A0522D; }
.dark\:border-brown-600 { border-color: #D2B48C; }
<\/style>Composants associés
Composant Colonnes
Il s’agit d’un composant de colonne simple et réactif pour le commerce électronique, avec des influences de Material Design, des couleurs en niveaux de gris et une prise en charge du mode sombre.
Composant Colonnes
Un composant de colonnes conçu avec le style Glassmorphism, des couleurs vives et une disposition simple, adaptée à un tableau de bord.
Composant Colonnes
Un composant de colonnes de style Material Design avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.