Submitted about 2 months ago

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

tailwind-css

Amiko Elvis•260

@amikoelvis

A solution to the Newsletter sign-up form with success message challenge

Preview Code

Solution retrospective

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.

Code

Please log in to post a comment

Community feedback

Thomas TS•1,350

@ttsoares

Posted about 2 months ago

My advice is to take advantage of Tailwind by using its main configure file: tailwind.config.js. There, one can do something like that:

/** @type {import('tailwindcss').Config} */

module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontSize: {
        xl: ["4rem", "110%"],
        lg: ["2.5rem", "110%"],
        md: ["1.125rem", "110%"],
        sm: ["1rem", "110%"],
        xs: ["1rem", "150%"],
      },
      screens: {
        sm: "375px",
        md: "768px",
        lg: "1440px",
      },
      colors: {
        c_cyan_l: "rgb(153, 227, 249)",
        c_cyan_d: "rgb(77,150,168)",
        c_cyan_hv: "rgb(113, 192, 212)",
      },
      fontFamily: {
        RedHat: ["RedHat", "sans-serif"],
      },
    },
  },
};

With that one can do: text-c_cyan_l text-RedHat This is the Tailwind way to treat styling...

Marked as helpful

Bello Ibrahim•660

@repro123

Posted about 2 months ago

Hi, nicely done.

You can add custom classes in tailwind CSS v4+. Also your roboto font won't work the way it is currently

In your input.css file: @import "tailwindcss";

After the above, you can add your custom classes with the @theme variable, like this

@import "tailwindcss"; 

@theme {
/* for colors */
--color-primary-color: hsl(0, 0%, 100%);

/* for font family */
--font-roboto: "Roboto", sans-serif;

/* for font sizes */
--text-primary-size: ***;
}

check here for full details https://tailwindcss.com/docs/adding-custom-styles

From the code in the above input.css file, you can now use the custom classes in your html e.g

<body class="font-roboto bg-primary-color ...etc"></body>

Marked as helpful

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