Interactive Card Details Form with Identifyting Card Types

🙋‍♂️ Hello, Everyone,

Here is my solution for the Interactive Card Details Form.

• Scored 99% on Google Pagespeed Insights! 🤩
• Built with ReactJS | Designed with TailwindCSS ⚙️
• Implemented Regular Expressions to validate and format the inputs. ⌨️
• Implemented Luhn's Algorithm to validate a card number. 💳
• Tried a combination of TailwindCSS & BEM to make the structure consistent and scalable. 📈
• Learned a way to add a gradient to the border: 💯
• Minified the CSS files to improve site performance 🚀

❗But I have some constraints regarding the design:

• The gradient border doesn't accept the border-radius property.
• Custom background configuration in tailwind.config.js doesn't work in production.

Your feedback is appreciated if you know the answer and/or find any other constraints. 🤝 Also, I'll be happy to hear any other Feedback or Advice on improving the code. 🤓

Code Together | Learn Together | Grow Together