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

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

Tailwind CSS を使用したブルータリスト スタイルのトースト通知コンポーネントで、作業や製品を紹介するポートフォリオ用に設計されています。このデザインには類似の配色が組み込まれており、複雑なインターフェースを備えたダークモードをサポートしています。

プレビュー

HTMLコード 

<div class="fixed top-4 right-4 z-50 space-y-4">
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Notification Title</h2>
                <p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Another Notification</h2>
                <p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
            </div>
            <button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
    <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
            <div class="flex-1">
                <h2 class="font-bold text-lg">Success Notification</h2>
                <p class="text-sm">Your latest action was successful. Keep up the great work!</p>
            </div>
            <button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
        </div>
    </div>
</div>

関連コンポーネント

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

ダッシュボード用の複雑な glassmorphism スタイルのトースト通知コンポーネントで、半透明の要素、ぼかし効果、および類似の配色が特徴です。ダークモードのサポートにより完全にレスポンシブ。

開ける

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

ジュエル トーン グラデーション トランジションを備えたレスポンシブ トースト通知コンポーネントで、政府/公共サービスの Web サイト向けに設計されており、ライト モードとダーク モードをサポートします。

開ける

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

glassmorphism デザイン、パステル調の配色、ダーク モードのサポートを備えた応答性の高いトースト通知コンポーネントで、予約および予約システムに適しています。

開ける