Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session complexe et réactif avec un design minimaliste en niveaux de gris, adapté aux sites Web d’entreprise et incluant la prise en charge du thème sombre.
HTML Code
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
<div class="p-6">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
<p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
<p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
</div>
<div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
<p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
<p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
<div class="flex items-center">
<svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
</div>
<label for="toggle-auto-renew" class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" id="toggle-auto-renew" class="sr-only">
<div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
</div>
</label>
<style>
input:checked ~ .dot {
transform: translateX(100%);
background-color: #4CAF50; /* A touch of green for
Composants associés
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session réactif avec conception 3D, schéma de couleurs triadique et prise en charge du mode sombre à l’aide de Tailwind CSS.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session simple en mode sombre pour les sites de commerce électronique, conçu avec des couleurs pastel et une réactivité à l’aide de TailwindCSS.
Alerte de délai d’expiration de la session
Un composant d’alerte de délai d’expiration de session réactif avec prise en charge du thème sombre, conçu avec une esthétique minimaliste/plate utilisant des couleurs pastel. Il présente une mise en page épurée avec une typographie claire et des repères visuels subtils pour l’interaction avec l’utilisateur, adaptés aux environnements de tableau de bord.