Profile Card Component

Attempted to write this for more reusable components. Also, any resources on understanding background images would be great. The info component could of been flex container that was centered but I wanted it to be absolute for practice. Its somewhat responsive when squished past the overall cards dimensions. It is a bit pushed over to the left more than I would like.

Resources on how to use tailwindcss so it is more readable. I had it such that using clsx, or a merge function using tailwind merge such that

<Component className={merge("h-[14rem] ... etc", "w-[35rem ... etc")} /> Where I would break the tailwindcss string at 80 line width. However, I find it at some point gets very confusing to read later after setting other components. Personally, I would like to use styled components but with react 18.2 / nextjs13 beta there isn't optimal support for it. I did some reading on tailwind macro but didn't look into it much for I feel it would run into the same problem that all css-in-js libraries would have. If someone knows of a styled like component way of writing css/scss into react components that would work with server components in the future, I would like to know about that. I know nextjs13 you can flush the css into the page, but I still don't understand the implications of that.