Componente de medios de Glassmorphism para la fabricación
Un componente de medios de vidrio con capacidad de respuesta diseñado para aplicaciones industriales/de fabricación, con elementos translúcidos esmerilados, colores neutros fríos y compatibilidad con el modo oscuro.
Código HTML
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-6 p-6 rounded-3xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 border border-gray-200 dark:border-gray-700 shadow-xl overflow-hidden relative">
<!-- Background Blurs for Glassmorphism Effect -->
<div class="absolute inset-0 z-0 opacity-40">
<div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-blue-600"></div>
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-gray-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-gray-600"></div>
</div>
<!-- Content Wrapper -->
<div class="relative z-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-6">
<!-- Image Section -->
<div class="flex-shrink-0 w-full md:w-1/2 overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-700 shadow-md">
<img src="https://picsum.photos/600/400?grayscale&random=1" alt="Industrial Machine" class="w-full h-auto object-cover transform transition-transform duration-300 hover:scale-105 rounded-2xl">
</div>
<!-- Text Content Section -->
<div class="flex-1 text-gray-800 dark:text-gray-100 space-y-4">
<h2 class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white">
Precision Engineering for Tomorrow's Industry
</h2>
<p class="text-lg opacity-90">
Discover our advanced solutions for manufacturing, designed to optimize efficiency and drive innovation.
Our cutting-edge technology ensures unparalleled accuracy and reliability.
</p>
<ul class="space-y-2 text-md opacity-90">
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
Automated Production Lines
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
Robust Quality Control
</li>
<li class="flex items-center">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
Sustainable Practices
</li>
</ul>
<button class="mt-4 px-6 py-3 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800 transition transform hover:-translate-y-0.5 shadow-lg">
Learn More
</button>
</div>
</div>
</div>
</div>
<!-- Tailwind CSS Keyframes for blob animation (usually in tailwind.config.js) -->
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>Componentes relacionados
Componente de componentes de medios
Un componente multimedia receptivo para interfaces financieras/bancarias, con diseño limpio, tonos azules y compatibilidad con el modo oscuro. Incluye un área de contenido principal con imagen, título, descripción y botón de acción, junto con una lista de artículos o ideas relacionadas.
Componente de medios Glassmorphic
Un componente de tarjeta multimedia responsivo con un diseño de morfismo de vidrio (efecto de vidrio esmerilado) construido con Tailwind CSS. Cuenta con un marcador de posición de imagen (de picsum.photos) con un icono de reproducción de revelación flotante, contenido de texto, una sección de autor con un avatar (de randomuser.me) y botones de acción. El componente es compatible con el modo oscuro utilizando las variantes 'dark:' de Tailwind CSS y responde a varios tamaños de pantalla. No se requiere JavaScript. Para obtener un efecto visual óptimo, coloque este componente sobre un fondo contrastante. La funcionalidad del modo oscuro supone una configuración CSS adecuada de Tailwind (por ejemplo, 'darkMode: "class"' en su tailwind.config.js).
Industrial_Marketplace_Media_Component
Un componente de medios simple de estilo industrial para un mercado, con una imagen, un título y un precio, con un enfoque en las materias primas y la estética utilitaria. Utiliza colores otoñales y admite el modo oscuro.