Simple Notification Card
A clean notification card component with icon, title, message, and timestamp. Perfect for displaying alerts, updates, or messages in your application. Features different color schemes for success, warning, and error states.
card notification
Loading component...
84 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Notification Card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
<div class="max-w-md w-full space-y-4">
<!-- Success Notification -->
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-green-500">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="text-sm font-medium text-gray-900">Successfully saved!</h3>
<p class="mt-1 text-sm text-gray-600">Your changes have been saved successfully.</p>
<p class="mt-2 text-xs text-gray-400">2 minutes ago</p>
</div>
<button class="flex-shrink-0 ml-4 text-gray-400 hover:text-gray-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Warning Notification -->
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-yellow-500">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="text-sm font-medium text-gray-900">Attention needed</h3>
<p class="mt-1 text-sm text-gray-600">Please review your account settings before proceeding.</p>
<p class="mt-2 text-xs text-gray-400">5 minutes ago</p>
</div>
<button class="flex-shrink-0 ml-4 text-gray-400 hover:text-gray-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Error Notification -->
<div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-red-500">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="text-sm font-medium text-gray-900">Error occurred</h3>
<p class="mt-1 text-sm text-gray-600">Something went wrong. Please try again later.</p>
<p class="mt-2 text-xs text-gray-400">10 minutes ago</p>
</div>
<button class="flex-shrink-0 ml-4 text-gray-400 hover:text-gray-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</body>
</html>