Retro_Industrial_Columns_Component
Сложный, яркий, выполненный в ретро/винтажном стиле колонны для производственных и промышленных компаний, выполненный в стиле 80-х/90-х годов, с поддержкой темного режима и полной отзывчивостью.
HTML-код
<section class="bg-gradient-to-br from-gray-200 to-gray-50 dark:from-zinc-900 dark:to-zinc-950 py-16 px-4 sm:px-6 lg:px-8 font-mono overflow-hidden relative">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-10 dark:opacity-5"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="text-center mb-16">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-indigo-700 dark:text-cyan-400 drop-shadow-lg mb-4 uppercase tracking-wider leading-tight animate-pulse-fast">
<span class="block transform -skew-x-6 inline-block bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 px-4 py-2 rounded-lg shadow-xl mb-2">Advanced Industrial Solutions</span>
<span class="block text-gray-800 dark:text-gray-100 mt-2">for the Modern Age</span>
</h2>
<p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto shadow-sm p-4 rounded-md bg-gray-100/70 dark:bg-zinc-800/70 backdrop-blur-sm border border-gray-300 dark:border-zinc-700">
Revolutionizing manufacturing with cutting-edge technology and unparalleled precision. Explore our robust capabilities.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
<!-- Column 1: Precision Engineering -->
<div class="group perspective h-full">
<div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-red-500 to-red-600 dark:from-red-600 dark:to-red-700 p-6 rounded-xl shadow-2xl border-4 border-red-400 dark:border-red-500 box-border text-gray-900">
<!-- Front Side -->
<div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
<div class="text-center flex-grow flex flex-col justify-center items-center">
<div class="text-6xl text-yellow-300 mb-4 animate-spin-slow-reverse"><span class="material-icons-outlined"></span></div>
<h3 class="text-3xl font-extrabold text-yellow-200 mb-3 drop-shadow-md text-glow capitalize">Precision Engineering</h3>
<p class="text-yellow-100 text-lg sm:text-xl">Unmatched accuracy for complex industrial demands.</p>
</div>
<button class="mt-8 px-6 py-3 bg-yellow-300 hover:bg-yellow-400 text-red-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-yellow-200 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-70">Discover More</button>
</div>
<!-- Back Side -->
<div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
<h3 class="text-2xl font-bold text-yellow-200 mb-3 border-b-2 border-yellow-300 pb-2">Key Features</h3>
<ul class="list-disc list-inside text-yellow-100 space-y-2 flex-grow text-lg">
<li><span class="text-yellow-300 pr-1">></span> CNC Machining</li>
<li><span class="text-yellow-300 pr-1">></span> CAD/CAM Integration</li>
<li><span class="text-yellow-300 pr-1">></span> Quality Control Systems</li>
<li><span class="text-yellow-300 pr-1">></span> Rapid Prototyping</li>
</ul>
<div class="text-center mt-6">
<img src="https://picsum.photos/id/160/300/200" alt="Precision Engineering" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-yellow-300 mb-4">
<a href="#" class="text-yellow-300 hover:underline transition-colors duration-300 text-lg">View Case Studies →</a>
</div>
</div>
</div>
</div>
<!-- Column 2: Automated Systems -->
<div class="group perspective h-full">
<div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-green-500 to-green-600 dark:from-green-600 dark:to-green-700 p-6 rounded-xl shadow-2xl border-4 border-green-400 dark:border-green-500 box-border text-gray-900">
<!-- Front Side -->
<div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
<div class="text-center flex-grow flex flex-col justify-center items-center">
<div class="text-6xl text-cyan-300 mb-4 animate-[spin_5s_linear_infinite]"><span class="material-icons-outlined"></span></div>
<h3 class="text-3xl font-extrabold text-cyan-200 mb-3 drop-shadow-md text-glow capitalize">Automated Systems</h3>
<p class="text-cyan-100 text-lg sm:text-xl">Smart solutions for peak operational efficiency.</p>
</div>
<button class="mt-8 px-6 py-3 bg-cyan-300 hover:bg-cyan-400 text-green-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-cyan-200 focus:outline-none focus:ring-4 focus:ring-cyan-500 focus:ring-opacity-70">Explore Robotics</button>
</div>
<!-- Back Side -->
<div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
<h3 class="text-2xl font-bold text-cyan-200 mb-3 border-b-2 border-cyan-300 pb-2">Key Technologies</h3>
<ul class="list-disc list-inside text-cyan-100 space-y-2 flex-grow text-lg">
<li><span class="text-cyan-300 pr-1">></span> Robotic Integration</li>
<li><span class="text-cyan-300 pr-1">></span> IoT & Sensors</li>
<li><span class="text-cyan-300 pr-1">></span> Predictive Maintenance</li>
<li><span class="text-cyan-300 pr-1">></span> AI-Driven Optimization</li>
</ul>
<div class="text-center mt-6">
<img src="https://picsum.photos/id/356/300/200" alt="Automated Systems" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-cyan-300 mb-4">
<a href="#" class="text-cyan-300 hover:underline transition-colors duration-300 text-lg">See Automation In Action →</a>
</div>
</div>
</div>
</div>
<!-- Column 3: Global Supply Chain -->
<div class="group perspective h-full">
<div class="relative preserve-3d transition-transform duration-700 group-hover:rotateY-180 bg-gradient-to-br from-purple-500 to-purple-600 dark:from-purple-600 dark:to-purple-700 p-6 rounded-xl shadow-2xl border-4 border-purple-400 dark:border-purple-500 box-border text-gray-900">
<!-- Front Side -->
<div class="absolute inset-0 backface-hidden flex flex-col justify-between p-6">
<div class="text-center flex-grow flex flex-col justify-center items-center">
<div class="text-6xl text-pink-300 mb-4 animate-[heartbeat_1.5s_infinite]"><span class="material-icons-outlined"></span></div>
<h3 class="text-3xl font-extrabold text-pink-200 mb-3 drop-shadow-md text-glow capitalize">Global Supply Chain</h3>
<p class="text-pink-100 text-lg sm:text-xl">Seamless logistics from raw material to finished product.</p>
</div>
<button class="mt-8 px-6 py-3 bg-pink-300 hover:bg-pink-400 text-purple-800 font-bold uppercase rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 self-center border-2 border-pink-200 focus:outline-none focus:ring-4 focus:ring-pink-500 focus:ring-opacity-70">View Our Network</button>
</div>
<!-- Back Side -->
<div class="absolute inset-0 rotateY-180 backface-hidden flex flex-col p-6">
<h3 class="text-2xl font-bold text-pink-200 mb-3 border-b-2 border-pink-300 pb-2">Logistics & Tracking</h3>
<ul class="list-disc list-inside text-pink-100 space-y-2 flex-grow text-lg">
<li><span class="text-pink-300 pr-1">></span> Real-time Tracking</li>
<li><span class="text-pink-300 pr-1">></span> Warehousing Solutions</li>
<li><span class="text-pink-300 pr-1">></span> Global Distribution</li>
<li><span class="text-pink-300 pr-1">></span> Compliance Management</li>
</ul>
<div class="text-center mt-6">
<img src="https://picsum.photos/id/1084/300/200" alt="Global Supply Chain" class="w-full h-32 object-cover rounded-lg shadow-inner border-2 border-pink-300 mb-4">
<a href="#" class="text-pink-300 hover:underline transition-colors duration-300 text-lg">Explore Our Reach →</a>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-16">
<div class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 uppercase tracking-wide">Trusted By Industry Leaders</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center max-w-4xl mx-auto opacity-80">
<img src="https://picsum.photos/id/237/100/50?grayscale" alt="Client Logo 1" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
<img src="https://picsum.photos/id/238/100/50?grayscale" alt="Client Logo 2" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
<img src="https://picsum.photos/id/239/100/50?grayscale" alt="Client Logo 3" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
<img src="https://picsum.photos/id/240/100/50?grayscale" alt="Client Logo 4" class="filter grayscale blend-multiply dark:invert mix-blend-lighten opacity-80 hover:opacity-100 transition-opacity duration-300 mx-auto">
</div>
<div class="mt-12">
<a href="#contact" class="inline-flex items-center px-8 py-4 bg-yellow-400 dark:bg-yellow-500 text-gray-900 border-4 border-yellow-300 dark:border-yellow-400 rounded-full text-xl font-bold uppercase shadow-2xl transition-all duration-300 transform hover:scale-105 hover:rotate-2 group focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-70 animate-bounce-slow">
<span class="material-icons-outlined text-3xl mr-3 group-hover:-rotate-12 transition-transform duration-300"></span>
Get a Quote Today!
</a>
</div>
</div>
</div>
<!-- Global Styles/Animations - Add to your main CSS or use a style tag for demo -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
.font-mono {
font-family: 'VT323', monospace;
}
h2, h3, button {
font-family: 'Press Start 2P', cursive;
}
.text-glow {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
}
.perspective {
perspective: 1000px;
/* height: 400px; /* Adjust as needed */
}
.preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotateY-180 {
transform: rotateY(180deg);
}
@keyframes pulse-fast {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.03); opacity: 0.9; }
}
.animate-pulse-fast {
animation: pulse-fast 2s infinite ease-in-out;
}
@keyframes spin-slow-reverse {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow-reverse {
animation: spin-slow-reverse 15s linear infinite;
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
@keyframes heartbeat {
0% { transform: scale(1); }
14% { transform: scale(1.15); }
28% { transform: scale(1); }
42% { transform: scale(1.15); }
70% { transform: scale(1); }
}
.animate-heartbeat {
animation: heartbeat 1.5s infinite;
}
@keyframes bounce-slow {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
.animate-bounce-slow {
animation: bounce-slow 4s infinite;
}
</style>
</section>Связанные компоненты
Luxury_Job_Board_Columns_Component
Роскошный/премиальный, монохроматический компонент колонны для досок объявлений о вакансиях и платформ для карьерного роста. Он отличается утонченным дизайном с элегантной типографикой, богатыми элементами интерфейса, полной отзывчивостью и поддержкой темных режимов.
Компонентный нейроморфизм столбцов
Столбцы Компонентный Неморфизм - Мягкий стиль пользовательского интерфейса, который создает элементы, выступающие из фона с помощью тонких теней. Этот компонент является адаптивным и имеет поддержку темных тем. Код JavaScript не нужен. Для темного режима достаточно поддержки CSS.
Компонент "Колонны"
Адаптивный компонент колонок с небольшими вовлекающими анимациями, подходящий для электронной коммерции с темной темой.