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

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

A QR component card made with tailwind.

Mobile View

Desktop View

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

Opening tailwind documentation and going through the steps. Since this project doesnt use a ./src file, set the content to the index.html path in tailwind.config. Set fonts and colors used in the style-guide.md inside tailwind.config file so it can be easily accessed when developing.

Use the following command to build the project, and open the index.html file using live server.

npx tailwindcss -i ./input.css -o ./output.css --watch

• HTML5
• Tailwind
• Flex classes
• Google fonts

Learned how to disable dragging on image elements to make the component feel more professional. Learned how to import fonts inside of tailwind, and add custom color classes to make development faster.

My solution to keeping the paragraph and header elements from exanding the card works, but not ideal when the image size must be changed. I will figure out a better solution for future components.

• Resource 1 - A solution to an issue where the styled were not working for me.

• Website - Brian Hammer
• Frontend Mentor - @BrianHammer

Stack Overflow questions and solutions helped me with some difficult to figure out bugs. Various tutorials on YouTube helped me to setup google fonts with tailwind.