Responsive solution using tailwind CSS and vanilla JavaScript

Great job completing this challenge!

My suggestion for using tailwind and adding custom colors to tailwind is to use the extend function in the tailwind config.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./dist/*.{html,js}"], 
    theme: {
        extend: {
            colors: {
                'rating-orange': 'hsl(25, 97%, 53%)',
                'rating-white': 'hsl(0, 0%, 100%)',
                'rating-very-dark-blue': 'hsl(216, 12%, 8%)',
                'rating-light-gray': 'hsl(217, 12%, 63%)',
                'rating-medium-gray': 'hsl(216, 12%, 54%)',
                'rating-dark-blue': 'hsl(213, 19%, 18%)',
            }
        },
    },
    }, plugins: [],
}

This will allow you to keep all of the built in color options that tailwind comes with while still being able to add custom colors