卡片 · Tender Swan

类型：组件　·　分类：卡片　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<!-- From Uiverse.io by FahadArnob52539  - Tags: card -->
<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>


    

[/hidecontent]