2.4K views
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}
MIT License