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

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

ダッシュボードデータの視覚化のためのGlassmorphismスタイルのアラートメッセージコンポーネントで、すりガラス効果、補色、ダークテーマをサポートするレスポンシブデザインが特徴です。

プレビュー

HTMLコード 

<div class="flex flex-col space-y-4 p-6">
    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
                <p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
            </div>
            <button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
                <p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
            </div>
            <button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
                <p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
            </div>
            <button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
        </div>
    </div>
</div>

関連コンポーネント

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

パステルカラーの配色でミニマル/フラットなスタイルでデザインされたレスポンシブアラートメッセージコンポーネントは、ソーシャルメディアインターフェイスに適しており、ダークテーマのサポートを組み込んでいます。

開ける

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

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

開ける

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

ビジネス/企業のWebサイト向けのレトロ/ビンテージスタイルのアラートメッセージコンポーネントで、アースカラーとダークモードをサポートするレスポンシブデザインが特徴です。

開ける