Front End Mentor - Project 027 - Pricing Component with Toggle

This is a solution to the Pricing Component with Toggle challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot + Video
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Screenshot + Video

• Desktop

video-desktop.mp4

• Mobile

Links

• Solution URL: https://github.com/rashidshamloo/fem_027_pricing-component-with-toggle/
• Live Site URL: https://rashidshamloo.github.io/fem_027_pricing-component-with-toggle/

My process

Built with

• Vite / Vue.js
• Tailwind CSS
• Semantic HTML5 markup

What I learned

• Using and implementing components with Vue.js (Options API)
• Using states (data()) to dynamically set different styles for elements
• Emitting events upwards from components and using them in the parent component
• Making and styling a toggle checkbox in HTML/CSS
• Using the peer class in Tailwind CSS to style elements
• Using :focus-visible pseudo-class in CSS and Tailwind CSS
• Using text-color/VALUE to control the color opacity in Tailwind CSS
• Using [&>*]- and similar selectors in Tailwind CSS
• Using custom @keyframes and animations in Tailwind CSS
• Animating gradient backgrounds in Tailwind CSS

Author

• Frontend Mentor - @rashidshamloo
• Twitter - @rashidshamloo