<template>
    
    <div
    class="mt-[5vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow p-[4vw] md:p-[1vw] space-y-[6vw] md:space-y-[2vw] md:mt-[1vw] text-[#383E43]"
  >
    <div
      class="flex justify-between text-[3.19vw] md:text-[0.833vw] font-semibold text-[#383E43]"
    >
      <span class="text-[3.59vw] md:text-[0.938vw]">پیشرفت شما</span>
      <span>77٪</span>
    </div>
    <div
      id="progressbar"
      class="mt-[3vw] md:mt-[0.7vw] h-[2.051vw] md:h-[0.521vw] rounded-[2vw] md:rounded-[0.521vw]"
    >
      <div
        class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.521vw]"
      ></div>
    </div>
  </div>
</template>
<style scoped>
#progressbar {
  background-color: #e5e5e5;

  width: 100%;
}
#progressbar > div {
  background-color: #0d3f40;
  width: 77%;
  float: left;

  left: 0;
}

</style>