This is a solution to the Product preview card component challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
To startup the application, clone the repository and run yarn dev
after running yarn install
Deploy this to some hosting platform
- React - JS library
- Next.js - React framework
- Tailwind - For styles
- T3 stack - Quick start the project
With this challenge I discovered a google extension called "ResponsiveViewer" that allowed me to view simultaneously both breakpoints that I had to consider.
I have also learned about the <picture>
tag that allows me to source different sized images to a <img>
tag based on breakpoint.
- Tailwind docs - Always helpful