CCHub Logo CCHub Tailwind Collection
コンポーネント セッション タイムアウト アラート セッション タイムアウト警告コンポーネント

セッション タイムアウト警告コンポーネント

glassmorphism スタイルで設計され、ダークテーマに適したレスポンシブセッションタイムアウトアラートコンポーネント。パステルカラーの配色、ぼかし効果のあるすりガラスのような半透明の要素、カウントダウンタイマーやアクションボタンなどのインタラクティブ機能が特徴です。

プレビュー

HTMLコード 

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
        <div class="flex justify-around mt-4">
            <button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
            <button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</button>
        </div>
    </div>
</div>

関連コンポーネント

セッション タイムアウト アラート コンポーネント - アールデコ調のキャンディー テーマ

アールデコ調のデザインで、明るいキャンディーカラーを使用したシンプルで応答性の高いセッションタイムアウトアラートコンポーネント。ドキュメント/Wikiサイト向けに最適化されており、ダークモードがサポートされています。

開ける

セッションタイムアウトアラートコンポーネント - 水彩/アーティスティック

eコマース向けの複雑で応答性の高いセッションタイムアウトアラートコンポーネントで、グラデーションのレインボーカラースキームとダークモードのサポートを備えた水彩画/芸術的なデザインが特徴です。延長またはログアウトするオプションが含まれています。

開ける

セッション タイムアウト アラート

3Dデザイン、トライアドカラースキーム、Tailwind CSSを使用したダークモードをサポートするレスポンシブセッションタイムアウトアラートコンポーネント。

開ける