Interactive pricing component

Awesome job, looks super clean and I really loved the slider animation you added.

Not sure what you meant with the background being blurred, though. It looked fine on my side, but I may be misunderstanding there.

Feel free to ignore this next bit, because it isn't really necessary but I just like buttons to "do" something. I wrote a few extra lines to make the Start my trial button more reactive -

Added to main.css

.start {
  ...
  transform: scale(1);
  transition: 0.2s ease-in;
}

.start:hover {
  ...
  cursor: pointer;
  transform: scale(1.05);
  transition: 0.2s ease-in;
}

.bounce {
  animation: 0.5s ease 0s 1 normal forwards bouncebtn;
}

@keyframes bouncebtn {
  0% {
    transform: scale(1.05);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

Added to script.js

const button = document.getElementById("submit-btn");

button.addEventListener("click", (e) => {
  e.preventDefault();
  button.classList.add("bounce");
  setTimeout(() => button.classList.remove("bounce"), 1000);
});

Added to index.html

<button id="submit-btn" class="start" type="button">
//same button, just with added id

I don't usually mess with vanilla CSS too much, but this ended up looking pretty cool so I wanted to share!

Here it is on CodeSandbox