Componente modal
Un componente modal complejo y sensible con un esquema de color negro, blanco y de acento, con transiciones de degradado adecuadas para aplicaciones industriales y de fabricación. Incluye soporte para modo oscuro.
Código HTML
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 lg:p-8">
<div class="relative w-full max-w-2xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800 transform transition-all duration-300 ease-in-out scale-95 opacity-0 animate-scale-in ">
<!-- animate-scale-in is a placeholder for a hypothetical animation class -->
<div class="h-4 bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-600 dark:to-indigo-700"></div>
<div class="p-6 md:p-8">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl">Production Line Status</h2>
<button type="button" class="text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 rounded-md p-1.5 transition-colors duration-200">
<span class="sr-only">Close modal</span>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="mb-8 space-y-4 md:flex md:space-y-0 md:space-x-6">
<div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Current Output</p>
<p class="text-3xl font-extrabold text-teal-600 dark:text-teal-400 animate-pulse">1,245 <span class="text-lg font-normal text-gray-700 dark:text-gray-300">units/hr</span></p>
<div class="w-full bg-gray-200 rounded-full h-2.5 mt-2 dark:bg-gray-600">
<div class="h-2.5 rounded-full bg-gradient-to-r from-teal-500 to-indigo-500 animating-width" style="width: 85%;"></div>
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">85% of target capacity</p>
</div>
<div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Efficiency Score</p>
<p class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400 animate-pulse">92.3%</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
+1.2% in last 24h
</p>
</div>
</div>
<div class="grid grid-cols-1 gap-4 mb-8 md:grid-cols-2">
<div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">System Alerts</p>
<ul class="space-y-2">
<li class="flex items-center text-sm text-red-600 dark:text-red-400">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
Critical: Machine #3 Overheating
</li>
<li class="flex items-center text-sm text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
Warning: Material Feed Low on Line 1
</li>
<li class="flex items-center text-sm text-gray-600 dark:text-gray-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Maintenance task pending
</li>
</ul>
</div>
<div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Maintenance Team</p>
<div class="flex -space-x-2 overflow-hidden mb-4">
<img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Smith">
<img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Doe">
<img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar of Mark Johnson">
</div>
<p class="mb-2 text-sm text-gray-700 dark:text-gray-300">
Upcoming Scheduled: <span class="font-semibold text-teal-600 dark:text-teal-400">Line 2 Inspection (08:00 AM)</span>
</p>
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">
View All Tasks
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<div class="flex flex-col-reverse justify-end gap-3 sm:flex-row">
<button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
Dismiss All Alerts
</button>
<button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-teal-500 to-indigo-600 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:from-teal-600 dark:to-indigo-700 transition-all duration-200 hover:scale-105 active:scale-95">
Take Corrective Action
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente modal esqueuomórfico
Un componente modal responsivo complejo con un diseño esqueuomórfico con colores complementarios para el comercio electrónico.
Componente modal de modo oscuro
Un componente modal responsivo simple diseñado para interfaces de redes sociales en modo oscuro con un esquema de color pastel.
Industrial_Sepia_Medical_Modal
Un componente modal simple y sensible con una estética industrial de materias primas, que utiliza tonos sepia/marrón, diseñado para aplicaciones médicas/sanitarias, con soporte para modo oscuro.