Card by Yaya12085

Made by

@Yaya12085

Theme:

Light

#card

#e8e8e8

769 views

CSSAdd prefixes

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

.card {
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  max-width: 320px;
  border-radius: 20px;
}

.title {
  display: flex;
  align-items: center;
}

.title span {
  position: relative;
  padding: 0.5rem;
  background-color: #10B981;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}

.title span svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  height: 1rem;
}

.title-text {
  margin-left: 0.5rem;
  color: #374151;
  font-size: 18px;
}

.percent {
  margin-left: 0.5rem;
  color: #02972f;
  font-weight: 600;
  display: flex;
}

.data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.data p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #1F2937;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  text-align: left;
}

.data .range {
  position: relative;
  background-color: #E5E7EB;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.data .range .fill {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #10B981;
  width: 76%;
  height: 100%;
  border-radius: 0.25rem;
}

HTML

1
2<div class="card">
3    <div class="title">
4        <span>
5            <svg width="20" fill="currentColor" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
6                <path d="M1362 1185q0 153-99.5 263.5t-258.5 136.5v175q0 14-9 23t-23 9h-135q-13 0-22.5-9.5t-9.5-22.5v-175q-66-9-127.5-31t-101.5-44.5-74-48-46.5-37.5-17.5-18q-17-21-2-41l103-135q7-10 23-12 15-2 24 9l2 2q113 99 243 125 37 8 74 8 81 0 142.5-43t61.5-122q0-28-15-53t-33.5-42-58.5-37.5-66-32-80-32.5q-39-16-61.5-25t-61.5-26.5-62.5-31-56.5-35.5-53.5-42.5-43.5-49-35.5-58-21-66.5-8.5-78q0-138 98-242t255-134v-180q0-13 9.5-22.5t22.5-9.5h135q14 0 23 9t9 23v176q57 6 110.5 23t87 33.5 63.5 37.5 39 29 15 14q17 18 5 38l-81 146q-8 15-23 16-14 3-27-7-3-3-14.5-12t-39-26.5-58.5-32-74.5-26-85.5-11.5q-95 0-155 43t-60 111q0 26 8.5 48t29.5 41.5 39.5 33 56 31 60.5 27 70 27.5q53 20 81 31.5t76 35 75.5 42.5 62 50 53 63.5 31.5 76.5 13 94z">
7                </path>
8            </svg>
9        </span>
10        <p class="title-text">
11            Sales
12        </p>
13        <p class="percent">
14           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" fill="currentColor" height="20" width="20">
15                <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z">
16                </path>
17            </svg> 20%
18        </p>
19    </div>
20    <div class="data">
21        <p>
22            39,500 
23        </p>
24        
25        <div class="range">
26            <div class="fill">
27            </div>
28        </div>
29    </div>
30</div>
31


<div class="card">
    <div class="title">
        <span>
            <svg width="20" fill="currentColor" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                <path d="M1362 1185q0 153-99.5 263.5t-258.5 136.5v175q0 14-9 23t-23 9h-135q-13 0-22.5-9.5t-9.5-22.5v-175q-66-9-127.5-31t-101.5-44.5-74-48-46.5-37.5-17.5-18q-17-21-2-41l103-135q7-10 23-12 15-2 24 9l2 2q113 99 243 125 37 8 74 8 81 0 142.5-43t61.5-122q0-28-15-53t-33.5-42-58.5-37.5-66-32-80-32.5q-39-16-61.5-25t-61.5-26.5-62.5-31-56.5-35.5-53.5-42.5-43.5-49-35.5-58-21-66.5-8.5-78q0-138 98-242t255-134v-180q0-13 9.5-22.5t22.5-9.5h135q14 0 23 9t9 23v176q57 6 110.5 23t87 33.5 63.5 37.5 39 29 15 14q17 18 5 38l-81 146q-8 15-23 16-14 3-27-7-3-3-14.5-12t-39-26.5-58.5-32-74.5-26-85.5-11.5q-95 0-155 43t-60 111q0 26 8.5 48t29.5 41.5 39.5 33 56 31 60.5 27 70 27.5q53 20 81 31.5t76 35 75.5 42.5 62 50 53 63.5 31.5 76.5 13 94z">
                </path>
            </svg>
        </span>
        <p class="title-text">
            Sales
        </p>
        <p class="percent">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" fill="currentColor" height="20" width="20">
                <path d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z">
                </path>
            </svg> 20%
        </p>
    </div>
    <div class="data">
        <p>
            39,500 
        </p>
        
        <div class="range">
            <div class="fill">
            </div>
        </div>
    </div>
</div>