CCHub Logo CCHub Tailwind Collection
コンポーネント アラート メッセージ アラート メッセージ コンポーネント

アラート メッセージ コンポーネント

電子商取引の目的でglassmorphism効果を使用して設計された応答性の高いアラートメッセージコンポーネント。単色の配色とTailwind CSSを使用したダークモードのサポートを備えたシンプルなレイアウトが特徴です。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md rounded-xl border border-gray-300 dark:border-gray-600 shadow-lg p-6 max-w-md w-full">
        <h2 class="text-xl text-gray-800 dark:text-gray-200 mb-4">Alert Message</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">
            Your order has been placed successfully! You will receive a confirmation email shortly.
        </p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="text-sm">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">Just now</p>
            </div>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

関連コンポーネント

Glassmorphism アラート メッセージ

Glassmorphism Alert Message Componentは、ポートフォリオ用に設計されたトライアドカラースキームとシンプルなレイアウトで、レスポンシブデザインとダークモードをサポートしています。

開ける

Retro_Alert_Messages_Component

ダッシュボードに適した、レトロ/ビンテージの黒、白、ネオンのアクセントカラースキームを備えた、シンプルで応答性の高いアラートメッセージコンポーネント。ダークモードのサポートが含まれています。

開ける

オーガニックネイチャーインスパイアードアラート

オーガニック/自然にインスパイアされたデザイン、補完的な配色を備えたシンプルで応答性の高いアラートメッセージコンポーネントで、コンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。

開ける