This is a solution to the Chat app CSS illustration challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• Bonus: See the chat interface animate on the initial load

• Solution URL: Here
• Live Site URL: Here

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• TailwindCSS - For styles

I found tailwind to be a powerful tool for interface development. It will be a matter of practice to get familiar with tailwind syntax.

    https://animate.style/

• Tailwind CSS - Easy to setup? by A shot of code channel - This helped me to configure tailwind for my first time.
• Customizing colors using css variables - I had a problem linking my custom css variables to the tailwind syntax. I was able to fix it by following the official documentation

• Website - Marcos Valentín Fitzsimons
• Frontend Mentor - @Marcosfitzsimons