Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session réactif et compatible avec un thème sombre avec le style Glassmorphism, les tons de terre et la mise en page complexe à l’aide de Tailwind CSS. Comprend des effets de verre givré, du flou et de multiples éléments interactifs adaptés à un portfolio.
HTML Code
<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>Composants associés
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de temporisation de session conçu dans un style brutaliste avec une esthétique brute et audacieuse, un contraste élevé et des effets réactifs. Ce composant prend en charge le thème sombre à l’aide du style CSS Tailwind et utilise des images d’espace réservé de picsum.photos et randomuser.me.
Composant d’alerte de délai d’expiration de session - Aquarelle/Artistique
Un composant complexe et réactif d’alerte de délai d’expiration de session pour le commerce électronique, avec un design aquarelle/artistique avec une palette de couleurs arc-en-ciel dégradée et la prise en charge du mode sombre. Comprend des options pour prolonger ou se déconnecter.
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session au design minimaliste et plat avec une palette de couleurs rétro/vintage, avec une mise en page simple, une réactivité totale et une prise en charge du mode sombre pour les sites de blog/contenu.