Frontend Mentor - Pricing component with toggle solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • AI Collaboration
• Getting Started
  • Prerequisites
  • Development Build
  • Production Build
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size ✅
• Control the toggle with both their mouse/trackpad and their keyboard ✅
• Bonus: Complete the challenge with just HTML and CSS ❎ (tailwindcss)

Screenshot

Target Build:

• General Overview

Solution Built:

• Mobile View:

• Desktop View:

Links

• Solution URL: GitHub Source Code
• Live Site URL: Vercel Deployed Demo

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• React - JS library
• TailwindCSS - CSS framework
• Vite - Build Tool

What I learned

• I learnt how to create a toggle using input:checkbox+label html elements. (Toggle.jsx)

AI Collaboration

Work with Claude as described in AGENTS Collaboration Specification file

Getting Started

Prerequisites

Node.js (v20+ recommended) Git

Development Build

To run this project locally, follow these steps:

• Clone your fork of the repository:

git clone https://github.com/yourusername/pricing-component.git

• Navigate to the project directory

cd pricing-component

• Install dependencies

npm install

• Start the development server

npm run dev

The app will be available at: http://localhost:5173

Production Build

npm run build
npm run preview

Author

• Personal Website - alfred.code
• Frontend Mentor - @TonyFred-code
• X (previously Twitter) - @alfredfaith35