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

Use this command when editing tailwind npx tailwindcss -i ./input.css -o ./output.css --watch

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

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

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

• Solution URL: https://github.com/BrianHammer/fm-rating-component
• Live Site URL: https://brianhammer.github.io/fm-rating-component/

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

I learned how to use a radial gradient with tailwind CSS. I also got more practice making cards and adjusting the spacing.

I will continue to learn how radial gradients work, and how to elegantly insert them with tailwind because radial support does not exist. This makes adding gradients into tailwind more difficult.

Stack Overflow

• Frontend Mentor - @brianhammer