diff --git a/resources/views/components/notification.blade.php b/resources/views/components/notification.blade.php
new file mode 100644
index 0000000..d5d6da7
--- /dev/null
+++ b/resources/views/components/notification.blade.php
@@ -0,0 +1,27 @@
+@props(['variant' => 'info', 'delay' => 2000])
+@php
+
+switch($variant) {
+case 'success':
+    $variant_classes = 'text-green-800 bg-green-200 border-green-300';
+    break;
+case 'warning':
+    $variant_classes = 'text-yellow-800 bg-yellow-200 border-yellow-300';
+    break;
+case 'danger':
+    $variant_classes = 'text-red-800 bg-red-200 border-red-300';
+    break;
+case 'info':
+default:
+    $variant_classes = 'text-blue-800 bg-blue-200 border-blue-300';
+}
+
+@endphp
+
+<div x-data="{ show: true }"
+    x-show="show"
+    x-init="setTimeout(() => show = false, {{ $delay }})"
+    {!! $attributes->merge(['class' => "w-full px-4 py-2 rounded border $variant_classes"]) !!}>
+
+    {{ $slot }}
+</div>