Frontend Mentor - Interactive pricing component solution

This is a solution to the Interactive pricing component challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Work time
  • Built with
• Author
• Acknowledgments

Overview

The challenge

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
• Use the slider and toggle to see prices for different page view numbers

Here are the different page view ranges and the corresponding monthly price totals:

• 10K pageviews / $8 per month
• 50K pageviews / $12 per month
• 100K pageviews / $16 per month
• 500k pageviews / $24 per month
• 1M pageviews / $36 per month

Screenshot

Links

• Solution: frontendmentor.io

• Live Site: cloudflare

My process

• 1.Download assets, Install Vite & TailwindCss, Initialize git, README.md, Prepare project
• 2.work on pricing component
• 3.Write README.md, Push to github, Make it live on Cloudflare, Publish to frontendmentor

Work Time

• My Clockify Report

Built with

• React
• Tailwind CSS
• Mui Material UI

Author

• Frontend Mentor - @siavhnz

• github - @siavhnz

Acknowledgments

Thanks To

Frontendmentor.io - for their Excitement challenges

Perfect Pixel - for such a great extension