Add Academic Component

[xxiyun]

[stanleylew5]

if you see your code, it looks like you're trying to add a background with certain dimensions when you can just use a border and you're trying to have your div start on the right side of the page -- you're overcomplicating it. try referencing this sample code I've written. it's basically your code but more optimized. you'll need to still style the text, etc but this should look more clean.

<div className="flex justify-end">
      <div className="relative h-[12vh] w-[25vw] border-8 border-csa-gray-100 rounded-3xl flex items-center">
         ......
      </div>
</div>

[xxiyun]

[stanleylew5]

this is how it looks like on my side, you're going to need to decrease the font size, increase the width of the div, and let's use a mr-[#vw] other than mr-28 since 28 is a relatively large value

[xxiyun]

i made the changes you requested but i'm not sure if it's fully correct because on my screen, the website does not reflect what your screen shows. any suggestions on how to fix it?

[stanleylew5]

lgtm!