Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session de style brutaliste, dynamique et réactif pour les plateformes de marché, prenant en charge le mode sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/80 dark:bg-black/90">
<div class="w-full max-w-md border-4 border-black dark:border-white bg-lime-400 dark:bg-fuchsia-700 shadow-[8px_8px_0px_black] dark:shadow-[8px_8px_0px_white] transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-[16px_16px_0px_black] dark:hover:shadow-[16px_16px_0px_white]">
<div class="p-6 sm:p-8 relative overflow-hidden">
<div class="mb-6 absolute top-0 left-0 w-full h-full bg-yellow-300 dark:bg-cyan-500 opacity-20 -z-10 rotate-3 scale-110"></div>
<div class="mb-6 absolute top-0 left-0 w-full h-full bg-red-600 dark:bg-purple-800 opacity-20 -z-10 -rotate-3 scale-110"></div>
<h2 class="text-3xl sm:text-4xl font-extrabold text-black dark:text-white mb-4 uppercase leading-tight tracking-tighter border-b-4 border-black dark:border-white pb-2">
SESSION ALERT!<br>Time's Up!
</h2>
<p class="text-lg sm:text-xl text-black dark:text-white mb-6 font-bold">
Your session is about to expire. Please extend your session to continue browsing cool stuff!
</p>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-white dark:text-black bg-purple-700 dark:bg-lime-300 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
Extend Session
</button>
<button class="flex-1 py-3 px-6 text-xl font-extrabold uppercase text-black dark:text-white bg-orange-500 dark:bg-red-700 border-4 border-black dark:border-white shadow-[6px_6px_0px_black] dark:shadow-[6px_6px_0px_white] transition-all duration-200 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-white">
Log Out Now
</button>
</div>
<div class="mt-8 flex items-center justify-between border-t-4 border-black dark:border-white pt-4">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Admin Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-none border-4 border-black dark:border-white object-cover">
<div>
<p class="text-base sm:text-lg font-bold text-black dark:text-white uppercase">Admin Hot-Line</p>
<p class="text-sm sm:text-base text-gray-800 dark:text-gray-200 font-mono">Ping us for help!</p>
</div>
</div>
<a href="#" class="text-sm sm:text-base font-bold text-blue-700 dark:text-blue-300 uppercase underline decoration-4 underline-offset-4 decoration-black dark:decoration-white hover:text-blue-900 dark:hover:text-blue-100 transition-colors duration-200">Contact Support</a>
</div>
</div>
</div>
</div>Composants associés
Composant d’alerte de délai d’expiration de session
Un composant d’alerte de délai d’expiration de session simple, réactif et monochromatique avec des effets de néon/lueur, conçu pour les plateformes d’éducation/d’apprentissage. Inclut la prise en charge du mode sombre.
Composant d’alerte de délai d’expiration de session - Arc-en-ciel neumorphe
Un composant Neumorphic Session Timeout Alert pour les applications de rencontres/sociales avec un schéma de couleurs arc-en-ciel dégradé. Il est réactif et prend en charge le mode sombre, incitant les utilisateurs à prolonger leur session ou à se déconnecter.
Alerte de délai d’expiration de session skeuomorphique
Un composant simple, de style Skeuomorphic, avec des couleurs en niveaux de gris, conçu pour les sites de blogs/de contenu. Il comprend un design réactif et la prise en charge du mode sombre.