Profile Card Component

This is a solution to the Profile card component challenge on Frontend Mentor.

Requirements

Users should be able to:

• Build out the project to the designs provided

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• React - JS library
• Remix - React framework
• Tailwindcss - For styles

What I learned

Applying multiple background in tailwind like this and make them responsive:

bg-[url('/images/bg-pattern-top.svg'),_url('/images/bg-pattern-bottom.svg')]
bg-contain
bg-[position:_right_50vw_bottom_70vh,_left_50vw_top_50vh]
bg-no-repeat
lg:bg-[position:_right_50vw_bottom_60vh,_left_40vw_top_50vh]