CCHub Logo CCHub Tailwind Collection
コンポーネント トースト通知 トースト通知コンポーネント

トースト通知コンポーネント

ダッシュボードアプリケーション用に設計されたダークモードトースト通知コンポーネントで、さまざまなインタラクティブ要素を備えた補色スキームが特徴です。

プレビュー

HTMLコード 

<div class="fixed bottom-5 right-5 space-y-4">
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">John Doe</p>
            <p class="text-sm">Successfully completed the action.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Dismiss
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm">You have new messages.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            View
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Mike Johnson</p>
            <p class="text-sm">Error occurred during processing!</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Retry
        </button>
    </div>
</div>

関連コンポーネント

トースト通知コンポーネント

スイス/インターナショナルタイポグラフィスタイル、パープル/バイオレットの配色を備えた、予約/予約システム用に設計された、すっきりとしたミニマリストのトースト通知コンポーネント。ダークモードのサポートにより完全にレスポンシブ。

開ける

トースト通知コンポーネント

Tailwind CSS を使用したミニマリストで活気に満ちたトースト通知コンポーネント。このコンポーネントは、ポートフォリオ用のシンプルなレイアウトで設計されており、ダークモードをサポートし、JavaScript なしでレスポンシブです。

開ける

トースト通知コンポーネント

Glassmorphism スタイルでデザインされた Toast Notifications コンポーネントで、レスポンシブ効果とダークテーマのサポートが特徴です。スタイリングには Tailwind CSS を使用し、ビジュアルには picsum.photos のプレースホルダー画像、アバターには randomuser.me を使用します。

開ける