通知コンポーネント
Tailwind CSS を使用して構築された、レスポンシブ効果とダーク テーマのサポートを備えた Skeuomorphism スタイルの通知コンポーネント。
HTMLコード
<div class="flex flex-col items-center p-4">
<!-- Notification 1 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 2 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 3 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
</div>