Компонент оповещения об истечении времени ожидания сеанса
Компонент оповещения об истечении времени ожидания сеанса, который запускает увлекательную анимацию. Он отличается адаптивным дизайном, подходит для дашбордов с пастельной цветовой гаммой и поддержкой темных тем. Он включает в себя интерактивные элементы, позволяющие пользователям продлить свою сессию или выйти из системы.
HTML-код
<div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
<div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
<div class="flex justify-around mt-4">
<button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
<button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
</div>
</div>
<div class="absolute bottom-2 right-2">
<img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
</div>
</div>Связанные компоненты
Компонент оповещения об истечении времени ожидания сеанса
Адаптивный компонент оповещения об истечении времени ожидания сеанса, разработанный для электронной коммерции, с привлекательной анимацией и темной темой. Он оснащен предупреждающим сообщением, таймером обратного отсчета и опциями для продления сеанса или выхода из системы.
Оповещение об истечении времени ожидания сеанса
Компонент оповещения об истечении времени ожидания сеанса со стилем микровзаимодействий, отзывчивыми эффектами и поддержкой темной темы.
Компонент оповещения об истечении времени ожидания сеанса
Компонент оповещения об истечении времени ожидания сеанса, выполненный в брутальном стиле с грубой, смелой эстетикой, высокой контрастностью и отзывчивыми эффектами. Этот компонент поддерживает темную тему с использованием стилизации Tailwind CSS и использует изображения-заполнители из picsum.photos и randomuser.me.