Tailwind CSS: Style pop-up messages (like success or error alerts).

Styling Common Web Page Parts

Style pop-up messages (like success or error alerts).

Skill ID: StylingCommonParts_23

Description: Design noticeable boxes with different colors to give users feedback.

Where to apply: After submitting a form, when an error occurs.

Key Tailwind Classes:


       bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded

Gotcha: Poor color contrast. Ensure the text color is easily readable against the alert's background color, especially for users with visual impairments. Using very light text on a light background is a common mistake.

Example:

Success! Your message has been sent.

Error! Something went wrong. Please try again.

Info: This is an informational message.

Warning! Please double-check your input.

The classes bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded (and similar variants for other colors like red, blue, yellow) are used to create these alert boxes. The combination provides background color, border color, text color, padding, and rounded corners.

Tailwind CSS Concept Explained

Styling Common Web Page Parts

Style pop-up messages (like success or error alerts).

Example:

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7: