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

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

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

プレビュー

HTMLコード 

<div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

関連コンポーネント

Retro Toast 通知コンポーネント

レトロなテーマのトースト通知コンポーネントで、レスポンシブ デザインとダーク モードがサポートされています。

開ける

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

パステルカラーの Glassmorphism スタイルの Toast Notifications コンポーネントは、ブログやコンテンツの消費用に設計されています。ダークモードをサポートし、インタラクティブな要素を備えた豊富なインターフェースを備えています。

開ける

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

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

開ける