トースト通知コンポーネント
パステルカラーの Glassmorphism スタイルの Toast Notifications コンポーネントは、ブログやコンテンツの消費用に設計されています。ダークモードをサポートし、インタラクティブな要素を備えた豊富なインターフェースを備えています。
HTMLコード
<div class="fixed bottom-5 right-5 z-50 space-y-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
<p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
<p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
<p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
</div>