トースト通知コンポーネント
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 スタイルと鮮やかな配色を備えたレスポンシブな Toast Notifications コンポーネントで、e コマース アプリケーションに適しています。ダークテーマをサポートし、複数のインタラクティブ要素を備えた複雑なインターフェイスを備えています。
Neumorphism トースト通知コンポーネント
Neumorphism Toast Notifications コンポーネントで、レスポンシブ効果とダーク テーマのサポートを備えています。