This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned

Note: Delete this note and update the table of contents based on what sections you keep.

The challenge was to create a simple product card that has two break points:

• Mobile: 375px
• Desktop: 1440px

The task was a nice little challenge to get my self started with Frontend Mentor, but there were some challenges, one of which was the fact that I have never used either Tailwind Css or Styled Components to deliver anything.

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements (Button only)

• Live Site URL: Add live site URL here

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow
• React - JS library
• Tailwind css - React framework
• Styled Components - For styles

I have learned a good amount of Tailwind and the class names. I have also learned Styled Components, But the biggest achievement was that i was able to connect the two technologies using twin macro.