Card by iSweat-exe

1.card {
2  padding: 1rem;
3  background-color: #fff;
4  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
5  max-width: 320px;
6  border-radius: 20px;
7  width: 250px;
8}
9
10.title {
11  display: flex;
12  align-items: center;
13}
14
15.title span {
16  position: relative;
17  padding: 0.5rem;
18  background-color: #B9101E;
19  width: 1.5rem;
20  height: 1.5rem;
21  border-radius: 9999px;
22}
23
24.title span svg {
25  position: absolute;
26  top: 50%;
27  left: 50%;
28  transform: translate(-50%, -50%);
29  color: #ffffff;
30  height: 1rem;
31}
32
33.title-text {
34  margin-left: 0.5rem;
35  color: #374151;
36  font-size: 18px;
37}
38
39.percent {
40  margin-left: 0.5rem;
41  color: #B9101E;
42  font-weight: 600;
43  display: flex;
44}
45
46.data {
47  display: flex;
48  flex-direction: column;
49  justify-content: flex-start;
50}
51
52.data p {
53  margin-top: 1rem;
54  margin-bottom: 1rem;
55  color: #1F2937;
56  font-size: 2.25rem;
57  line-height: 2.5rem;
58  font-weight: 700;
59  text-align: left;
60}
61
62.data .range {
63  position: relative;
64  background-color: #E5E7EB;
65  width: 100%;
66  height: 0.5rem;
67  border-radius: 0.25rem;
68}
69
70.data .range .fill {
71  position: absolute;
72  top: 0;
73  left: 0;
74  background-color: #B9101E;
75  width: 36%;
76  height: 100%;
77  border-radius: 0.25rem;
78  transition: .5s all;
79}