Responsive newsletter-sign-up-form using JavaScript and Tailwind CSS

What are you most proud of, and what would you do differently next time?

I'm most proud of building a fully responsive and accessible newsletter sign-up form with proper form validation and smooth UI transitions using just HTML, Tailwind CSS, and vanilla JavaScript. I paid close attention to matching the design specs and ensuring a clean user experience across devices.

Next time, I would focus more on improving accessibility further (like keyboard navigation and ARIA roles), and maybe consider adding subtle animations or transitions for a more polished feel.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I encountered was matching the exact design colors and hover effects from the provided style guide without using a Tailwind config file. Since HSL values aren't supported directly in Tailwind's default utility classes, I had to work around it by using inline styles or approximating with existing Tailwind color classes.

Another challenge was implementing the hover effect on the button, which required a subtle gradient animation from right to left. I overcame this by experimenting with Tailwind's bg-gradient-to-l, hover: states, and testing different background transition strategies until it visually matched the design.

What specific areas of your project would you like help with?

I would like help with:

• Improving the gradient hover effect on the submit button to better match the design spec (a smooth darker orange flowing from right to left).
• Optimizing Tailwind class usage, especially where I had to use inline styles or approximations due to lack of custom configuration.