Card by 00Kubi

1.card {
2  width: 300px;
3  height: 220px;
4  background-color: rgb(255, 255, 255);
5  border-radius: 8px;
6  display: flex;
7  flex-direction: column;
8  align-items: center;
9  justify-content: center;
10  padding: 20px 30px;
11  gap: 13px;
12  position: relative;
13  overflow: hidden;
14  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.062);
15}
16
17#cookieSvg {
18  width: 50px;
19}
20
21#cookieSvg g path {
22  fill: rgb(97, 81, 81);
23}
24
25.cookieHeading {
26  font-size: 1.2em;
27  font-weight: 800;
28  color: rgb(26, 26, 26);
29}
30
31.cookieDescription {
32  text-align: center;
33  font-size: 0.7em;
34  font-weight: 600;
35  color: rgb(99, 99, 99);
36}
37
38.cookieDescription a {
39  --tw-text-opacity: 1;
40  color: rgb(59 130 246);
41}
42
43.cookieDescription a:hover {
44  -webkit-text-decoration-line: underline;
45  text-decoration-line: underline;
46}
47
48.buttonContainer {
49  display: flex;
50  gap: 20px;
51  flex-direction: row;
52}
53
54.acceptButton {
55  width: 80px;
56  height: 30px;
57  background-color: #7b57ff;
58  transition-duration: .2s;
59  border: none;
60  color: rgb(241, 241, 241);
61  cursor: pointer;
62  font-weight: 600;
63  border-radius: 20px;
64  box-shadow: 0 4px 6px -1px #977ef3, 0 2px 4px -1px #977ef3;
65  transition: all .6s ease;
66}
67
68.declineButton {
69  width: 80px;
70  height: 30px;
71  background-color: #dadada;
72  transition-duration: .2s;
73  color: rgb(46, 46, 46);
74  border: none;
75  cursor: not-allowed;
76  font-weight: 600;
77  border-radius: 20px;
78  box-shadow: 0 4px 6px -1px #bebdbd, 0 2px 4px -1px #bebdbd;
79  transition: all .6s ease;
80}
81
82.declineButton:hover {
83  background-color: #ebebeb;
84  box-shadow: 0 10px 15px -3px #bebdbd, 0 4px 6px -2px #bebdbd;
85  transition-duration: .2s;
86}
87
88.acceptButton:hover {
89  background-color: #9173ff;
90  box-shadow: 0 10px 15px -3px #977ef3, 0 4px 6px -2px #977ef3;
91  transition-duration: .2s;
92}