トースト通知コンポーネント
Glassmorphism スタイルと鮮やかな配色を備えたレスポンシブな Toast Notifications コンポーネントで、e コマース アプリケーションに適しています。ダークテーマをサポートし、複数のインタラクティブ要素を備えた複雑なインターフェイスを備えています。
HTMLコード
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
<!-- Toast Notification -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-vibrant-500 dark:text-vibrant-300">John Doe</p>
<p class="text-gray-700 dark:text-gray-300">Your order has been shipped!</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
×
</button>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/400/200?random=1" alt="Product Image" class="w-full rounded-lg mb-2">
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name</p>
<p class="text-gray-600 dark:text-gray-400">Price: $29.99</p>
<button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
View Order
</button>
</div>
</div>
</div>
<!-- Toast Notification (Alternate) -->
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-vibrant-500 dark:text-vibrant-300">Jane Smith</p>
<p class="text-gray-700 dark:text-gray-300">You have a new message!</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
×
</button>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<p class="font-semibold text-gray-800 dark:text-gray-200">Check your inbox for more details.</p>
<button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
View Messages
</button>
</div>
</div>
</div>関連コンポーネント
トースト通知コンポーネント
Tailwind CSS を使用したブルータリスト スタイルのトースト通知コンポーネントで、作業や製品を紹介するポートフォリオ用に設計されています。このデザインには類似の配色が組み込まれており、複雑なインターフェースを備えたダークモードをサポートしています。