1
2<div class="alert-container">
3    <div class="alert">
4        <div class="alert-icon">
5            <i class="fas fa-circle-info"></i>
6        </div>
7        <div class="alert-content">
8            <div class="alert-title">Information</div>
9            <div class="alert-message">This is an informational alert.</div>
10        </div>
11        <button class="alert-close" onclick="closeAlert(this)">
12            <i class="fas fa-times"></i>
13        </button>
14    </div>
15</div>
16
17<script>
18function closeAlert(button) {
19    const alert = button.closest('.alert');
20    alert.classList.add('closing');
21    setTimeout(() => {
22        alert.parentElement.remove();
23    }, 300);
24}
25</script>
26

1
2.alert-container {
3    position: fixed;
4    top: 20px;
5    right: 20px;
6    z-index: 1000;
7}
8
9.alert {
10    background-color: #e3f2fd;
11    color: #0d47a1;
12    border: 1px solid #2196f3;
13    border-radius: 4px;
14    padding: 16px;
15    width: 300px;
16    font-size: 14px;
17    display: flex;
18    align-items: flex-start;
19    animation: slideIn 0.3s ease-out;
20}
21
22.alert-icon {
23    color: #2196f3;
24    font-size: 21px;
25    margin-right: 8px;
26}
27
28.alert-content {
29    flex-grow: 1;
30}
31
32.alert-title {
33    font-weight: bold;
34    margin-bottom: 4px;
35}
36
37.alert-close {
38    color: #0d47a1;
39    opacity: 0.7;
40    font-size: 16.8px;
41    cursor: pointer;
42    transition: opacity 0.2s;
43}
44
45.alert-close:hover {
46    opacity: 1;
47}
48
49@keyframes slideIn {
50    from {
51        transform: translateX(100%);
52        opacity: 0;
53    }
54    to {
55        transform: translateX(0);
56        opacity: 1;
57    }
58}
59
60@keyframes slideOut {
61    to {
62        transform: translateX(100%);
63        opacity: 0;
64    }
65}
66
67.alert.closing {
68    animation: slideOut 0.3s ease-in forwards;
69}
70