Submitted about 1 year ago

Reponsive Interactive pricing component using Vite+React+Tailwind

Beibei• 290

@Diviner-Beibei

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive pricing component

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone, I've been a coder for a few years , but I'm still new to the web development, any comments or suggestions would be greatly appreciated!

Technologies Used:

Unresolved Issues:

#slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  background: no-repeat center, #10d8c4;
  background-image: url("./icon-slider.svg");
  border-radius: 50%;
  box-shadow: 0px 15px 30px 0px rgba(0, 255, 231, 0.6);

  cursor: pointer; /* Change cursor on hover */
  margin-top: -18px;
}

I added this code in the index.css file, but when I deploy I get this problem： GET https://diviner-beibei.github.io/interactive-pricing-component/assets/icon-slider.svg 404

I know the reason for this problem, but there is no solution, if you can provide me with some solutions, I will be very grateful

Community feedback

Tomazi• 300

@tomazi15

Posted about 1 year ago

dont think you can import svg's using css in React, you can import svg as a component: there are some examplese here good read:

https://www.freecodecamp.org/news/how-to-import-svgs-in-react-and-vite/

Marked as helpful

Beibei• 290

@Diviner-Beibei

Posted about 1 year ago

@tomazi15 Thank you very much for your reply, I used Tailwindcss to build this project, because I need to customize the style of Slider, but Tailwindcss does not provide such a function, so I had to put this code in the index.css file, so generated this problem

Beibei• 290

@Diviner-Beibei

Posted about 1 year ago

@tomazi15 It's just that the file path is incorrect, I think the problem is complicated! ! ! I have solved it

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord