Corporate/Professional Manufacturing Columns 구성 요소
기업적/전문적 미학과 가을 색 구성표를 가진 제조/산업 기업을 위해 설계된 복잡하고 반응이 빠른 기둥 구성 요소입니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.
HTML 코드
<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>관련 구성 요소
Columns 구성 요소
소셜 네트워킹 인터페이스를 위해 설계된 회색조 색 구성표가 있는 미니멀리스트 열 구성 요소입니다. 어두운 테마를 지원하는 반응형 레이아웃이 특징입니다.
Columns 구성 요소
Columns Component(대시보드의 구성 요소)는 보색이 있는 3D 디자인을 특징으로 합니다. 여기에는 간단한 레이아웃, 다크 모드 지원이 있는 3개의 반응형 열이 포함되어 있으며 스타일링에 Tailwind CSS를 사용합니다. JavaScript는 포함되어 있지 않습니다.