پیشنمایش زنده
کد HTML
<div class="CountersNumericV4WProgress w-96 h-44 relative">
<div class="Bg w-96 h-44 left-0 top-0 absolute rounded-xl border border-neutral-300 border-opacity-70"></div>
<div class="AmountR left-[332px] top-[110px] absolute text-right text-black text-sm font-bold leading-tight">379</div>
<div class="AmountL left-[24px] top-[110px] absolute text-black text-sm font-bold leading-tight">20.06.2024</div>
<div class="ElementProgressBarsMedium w-96 h-1 left-[24px] top-[86px] absolute">
<div class="Bg w-80 h-1 left-0 top-0 static bg-white bg-opacity-90 rounded-sm"></div>
<div class="Progress w-48 h-1 left-0 top-0 absolute bg-amber-300 rounded-sm"></div>
</div>
<div class="SubtitleR left-[307px] top-[133px] absolute text-right text-zinc-500 text-xs font-medium leading-none">Days left</div>
<div class="SubtitleL left-[24px] top-[133px] absolute text-zinc-500 text-xs font-medium leading-none">Expiration date</div>
<div class="Amount left-[24px] top-[41px] absolute text-black text-lg font-extrabold leading-normal">$6,900.00</div>
<div class="Title left-[24px] top-[15px] absolute text-zinc-500 text-sm font-normal leading-tight">Accured interest</div>
</div>
کد CSS
.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.left-\[24px\]{left:24px}.left-\[307px\]{left:307px}.left-\[332px\]{left:332px}.top-0{top:0px}.top-\[110px\]{top:110px}.top-\[133px\]{top:133px}.top-\[15px\]{top:15px}.top-\[41px\]{top:41px}.top-\[86px\]{top:86px}.h-1{height:0.25rem}.h-44{height:11rem}.w-48{width:12rem}.w-80{width:20rem}.w-96{width:24rem}.rounded-sm{border-radius:0.125rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(212 212 212 / var(--tw-border-opacity))}.border-opacity-70{--tw-border-opacity:0.7}.bg-amber-300{--tw-bg-opacity:1;background-color:rgb(252 211 77 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-opacity-90{--tw-bg-opacity:0.9}.text-right{text-align:right}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-tight{line-height:1.25}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122 / var(--tw-text-opacity))}