React + Tailwind

Hi there, nice project!

To answer your questions:

• Gradient background can be implemented with a help of the before or after pseudo element. Since you are using tailwind, add relative class to the button and create the pseudo element that will be positioned absolutely to the button and will take up 100% of its height and width, it can be coded inside the index.css file. Add an overflow-hidden class to the button or specify the same border radius for the pseudo element, so that the edges are not sticking out. For smooth transition, you can animate its opacity. Also, remember about setting up a higher z-index value on the button, so that its text will be always visible.
• Gradient shadows can also be created using pseudo elements. I encourage you to visit this CSS Tricks article.
• When it comes to the warning message, I think it can be caused by the noRecharge function - it's blocking the default form action but it also returns it at the same time. Try coverting it to this: export const noRecharge = (event: React.FormEvent<HTMLFormElement> | undefined) => { if (event) { event.preventDefault(); } };.

Also, I would also suggest to perform the form validation in the function that is triggered on the onSubmit event - this way, the event is always recevied as an argument. The vaiidation check can be performed using a custom hook (here's an example). Based on what it returns, the error state/message can be stored by the useState hook and used to dynamically add classes/style the input element (there's no need to create and render two separate input elements).

Hope it helps!