通知コンポーネント
スキューモーフィズムスタイルの通知コンポーネントで、レスポンシブデザインとダークテーマのサポートを備えています。このコンポーネントは、微妙な影やキラキラの効果など、通知のリアルなエンボス加工の外観を特徴としています。完全にレスポンシブで、ダークモード用の明確なスタイルが含まれているため、あらゆる照明条件で読みやすさと美的魅力が保証されます。アバターのプレースホルダー画像を使用します。
HTMLコード
<div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>
<!-- Notification 1 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
</div>
</div>
<!-- Notification 2 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
</div>
</div>
<!-- Notification 3 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
</div>
</div>
</div>