Card by Yaya12085

1.card {
2  max-width: 320px;
3  border-width: 1px;
4  border-color: rgba(219, 234, 254, 1);
5  border-radius: 1rem;
6  background-color: rgba(255, 255, 255, 1);
7  padding: 1rem;
8}
9
10.header {
11  display: flex;
12  align-items: center;
13  grid-gap: 1rem;
14  gap: 1rem;
15}
16
17.icon {
18  flex-shrink: 0;
19  display: flex;
20  align-items: center;
21  justify-content: center;
22  border-radius: 9999px;
23  background-color: rgba(96, 165, 250, 1);
24  padding: 0.5rem;
25  color: rgba(255, 255, 255, 1);
26}
27
28.icon svg {
29  height: 1rem;
30  width: 1rem;
31}
32
33.alert {
34  font-weight: 600;
35  color: rgba(107, 114, 128, 1);
36}
37
38.message {
39  margin-top: 1rem;
40  color: rgba(107, 114, 128, 1);
41}
42
43.actions {
44  margin-top: 1.5rem;
45}
46
47.actions a {
48  text-decoration: none;
49}
50
51.mark-as-read, .read {
52  display: inline-block;
53  border-radius: 0.5rem;
54  width: 100%;
55  padding: 0.75rem 1.25rem;
56  text-align: center;
57  font-size: 0.875rem;
58  line-height: 1.25rem;
59  font-weight: 600;
60}
61
62.read {
63  background-color: rgba(59, 130, 246, 1);
64  color: rgba(255, 255, 255, 1);
65}
66
67.mark-as-read {
68  margin-top: 0.5rem;
69  background-color: rgba(249, 250, 251, 1);
70  color: rgba(107, 114, 128, 1);
71  transition: all .15s ease;
72}
73
74.mark-as-read:hover {
75  background-color: rgb(230, 231, 233);
76}