Оповещение об истечении времени ожидания сеанса
Простой компонент оповещения об истечении времени ожидания сеанса в темном режиме для сайтов электронной коммерции, разработанный в пастельных тонах и быстро реагирующий с использованием TailwindCSS.
HTML-код
<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
<h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
<p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
<div class="flex justify-end space-x-2">
<button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
<button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</button>
</div>
</div>
</div>Связанные компоненты
Компонент оповещения об истечении времени ожидания сеанса
Компонент оповещения об истечении времени ожидания сеанса, выполненный в брутальном стиле с грубой, смелой эстетикой, высокой контрастностью и отзывчивыми эффектами. Этот компонент поддерживает темную тему с использованием стилизации Tailwind CSS и использует изображения-заполнители из picsum.photos и randomuser.me.
Компонент оповещения об истечении времени ожидания сеанса
Адаптивный компонент оповещения об истечении времени ожидания сеанса, разработанный для электронной коммерции, с привлекательной анимацией и темной темой. Он оснащен предупреждающим сообщением, таймером обратного отсчета и опциями для продления сеанса или выхода из системы.
Компонент оповещения об истечении времени ожидания сеанса
Отзывчивый, совместимый с темной темой компонент оповещения об истечении времени ожидания сессии в стиле Glassmorphism, земляными тонами и сложным макетом с использованием Tailwind CSS. Имеет эффекты матового стекла, размытие и множество интерактивных элементов, подходящих для портфолио.