پیشنمایش زنده
کد HTML
<div class="h-[220px] w-[700px] bg-slate-200 flex rounded-xl">
<div class="h-full w-[250px] p-7 text-white bg-[#261a6b] rounded-l-xl">
<p class="text-[11px] tracking-widest text-[#cccc]">COURSE</p>
<h1 class="text-[25px] pt-5 font-medium tracking-wide leading-[25px]">
JavaScript Fundamentals
</h1>
<h4 class="text-[12px] pt-[50px] text-[#cccccc] cursor-pointer">
view all chapters <i class="fa-solid fa-chevron-right"></i>
</h4>
</div>
<div class="p-7 bg-white w-full rounded-r-xl relative">
<div class="flex justify-between">
<h1 class="text-[#949494] text-[13px] tracking-[.5px]">CHAPTER 4</h1>
<div class="relative">
<div class="h-1.5 w-[200px] bg-slate-200 rounded-xl">
<div class="h-1.5 w-[120px] bg-[#261a6b] rounded-xl"></div>
</div>
<p class="text-[#a8a8a8] text-[12px] tracking-[.5px] absolute right-0">
6/9 Chaqllenges
</p>
</div>
</div>
<h1 class="text-[28px] pt-2 font-[500] tracking-wide">
Callbacks & Closures
</h1>
<input
type="button"
value="Continue"
class="h-10 w-[120px] bg-[#261a6be8] text-white rounded-3xl tracking-wide absolute right-10 bottom-7 cursor-pointer hover:bg-[#4938b6e8]"
/>
</div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.bottom-7{bottom:1.75rem}.right-0{right:0px}.right-10{right:2.5rem}.flex{display:flex}.h-1\.5{height:0.375rem}.h-10{height:2.5rem}.h-\[220px\]{height:220px}.h-full{height:100%}.w-\[120px\]{width:120px}.w-\[200px\]{width:200px}.w-\[250px\]{width:250px}.w-\[700px\]{width:700px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.justify-between{justify-content:space-between}.rounded-3xl{border-radius:1.5rem}.rounded-xl{border-radius:0.75rem}.rounded-l-xl{border-top-left-radius:0.75rem;border-bottom-left-radius:0.75rem}.rounded-r-xl{border-top-right-radius:0.75rem;border-bottom-right-radius:0.75rem}.bg-\[\#261a6b\]{--tw-bg-opacity:1;background-color:rgb(38 26 107 / var(--tw-bg-opacity))}.bg-\[\#261a6be8\]{background-color:#261a6be8}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-7{padding:1.75rem}.pt-2{padding-top:0.5rem}.pt-5{padding-top:1.25rem}.pt-\[50px\]{padding-top:50px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[25px\]{font-size:25px}.text-\[28px\]{font-size:28px}.font-\[500\]{font-weight:500}.font-medium{font-weight:500}.leading-\[25px\]{line-height:25px}.tracking-\[\.5px\]{letter-spacing:.5px}.tracking-wide{letter-spacing:0.025em}.tracking-widest{letter-spacing:0.1em}.text-\[\#949494\]{--tw-text-opacity:1;color:rgb(148 148 148 / var(--tw-text-opacity))}.text-\[\#a8a8a8\]{--tw-text-opacity:1;color:rgb(168 168 168 / var(--tw-text-opacity))}.text-\[\#cccc\]{color:#cccc}.text-\[\#cccccc\]{--tw-text-opacity:1;color:rgb(204 204 204 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:bg-\[\#4938b6e8\]:hover{background-color:#4938b6e8}