Refactor: Replace Hardcoded Hex Colors with Custom Tailwind Color Templates

[VinuB-Dev]

Issue Description

The current codebase contains hardcoded hex color values (e.g., #D0D5DD, #74777B, #4541C6, #F5F5FF) in the class names instead of using Tailwind CSS color classes or custom color templates. This reduces code consistency and increases maintenance effort.

Expected Behavior

All colors should use Tailwind CSS color classes or project-specific custom color templates to ensure:

• Ease of updating the color palette in the future.
• Improved readability and adherence to Tailwind CSS conventions.

Current Behavior

The code includes hardcoded hex color values such as #D0D5DD, #74777B, #4541C6, and #F5F5FF instead of Tailwind CSS color utilities or custom templates.

Screenshots

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

1. Inspect the codebase for components where colors are hardcoded as hex values.
2. Review the provided snippet to see an example of the issue.

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Tailwind CSS offers a robust color palette that supports most design needs. Additionally, custom color templates can be defined in the Tailwind CSS configuration file (tailwind.config.js) for colors not available in the default palette. This would align the code with project standards and reduce the risk of inconsistencies.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.