セッション タイムアウト警告コンポーネント
魅力的なアニメーションをトリガーするセッションタイムアウトアラートコンポーネント。レスポンシブデザインが特徴で、パステルカラーの配色とダークテーマのサポートを備えたダッシュボードに適しています。これにはインタラクティブな要素が含まれており、ユーザーはセッションを延長したりログアウトしたりできます。
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>関連コンポーネント
セッション タイムアウト警告コンポーネント
3D デザインスタイル、ダークテーマのサポート、プレースホルダー画像の組み込みを特徴とするレスポンシブセッションタイムアウトアラートコンポーネント。
セッション タイムアウト警告コンポーネント
電子商取引Webサイト用のミニマリストセッションタイムアウトアラートコンポーネントで、単色の配色で設計され、Tailwind CSSを使用したダークテーマサポートでレスポンシブです。