Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión responsivo y compatible con temas oscuros con estilo Glassmorphism, tonos tierra y diseño complejo con Tailwind CSS. Cuenta con efectos de vidrio esmerilado, desenfoque y múltiples elementos interactivos adecuados para un portafolio.
Código HTML
<div class="relative min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<!-- Glassmorphism 배경 효과 -->
<div class="absolute inset-0 w-full h-full bg-gradient-to-br from-amber-500/20 to-green-600/20 backdrop-filter backdrop-blur-xl z-0"></div>
<div class="relative bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-lg shadow-lg p-6 max-w-sm mx-auto z-10 border border-gray-200 dark:border-gray-700">
<!-- 헤더 -->
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">세션 타임아웃</h3>
<svg class="w-5 h-5 text-gray-600 dark:text-gray-300" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<!-- 내용 -->
<div class="text-sm text-gray-700 dark:text-gray-200 mb-6">
<p>보안상의 이유로 회원님의 세션이 곧 만료됩니다. 계속 활동하려면 "세션 연장" 버튼을 클릭해 주세요.</p>
<p class="mt-2 font-semibold">남은 시간: <span class="text-amber-700 dark:text-amber-400">05:00</span></p>
</div>
<!-- 프로그레스 바 (예시) -->
<div class="w-full bg-gray-300 dark:bg-gray-600 rounded-full h-2 mb-6">
<div class="bg-green-600 dark:bg-green-500 h-2 rounded-full" style="width: 80%;"></div>
</div>
<!-- 버튼 -->
<div class="flex justify-end space-x-3">
<button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 border border-transparent rounded-md hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900">취소</button>
<button class="px-4 py-2 text-sm font-medium text-white bg-amber-600 border border-transparent rounded-md shadow-sm hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-900 dark:bg-amber-700 dark:hover:bg-amber-800">세션 연장</button>
</div>
</div>
</div>Componentes relacionados
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión diseñado en un estilo brutalista con una estética cruda y audaz, alto contraste y efectos receptivos. Este componente es compatible con el tema oscuro mediante el estilo CSS de Tailwind y utiliza imágenes de marcador de posición de picsum.photos y randomuser.me.
Componente de alerta de tiempo de espera de sesión
Un componente de alerta de tiempo de espera de sesión receptivo diseñado con estilo glassmorphism y adecuado para temas oscuros. Cuenta con una combinación de colores pastel, elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y algunas funciones interactivas como un temporizador de cuenta regresiva y botones de acción.
Alerta de tiempo de espera de sesión skeuomórfica
Un componente de alerta de tiempo de espera de sesión simple de estilo Skeuomórfico con colores en escala de grises, diseñado para sitios de blog/contenido. Incluye diseño responsivo y soporte para modo oscuro.