Using different backgrounds colors for various devices

Tailwind Code		Output
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-red-700 text-xl mx-20 font-bold "> Tailwind bg color - Breakpoints </h1> <div class="flex flex-5 mx-8 mt-10 justify-between gap-2"> <div class="max-w-xs w-96"> <p class="bg-gray-950 lg:bg-red-300 mb-5 h-10 w-50 text-white text-center">bg-gray-950 lg:bg-red-300</p> <p class="bg-gray-800 lg:bg-red-800 mb-5 h-10 w-60 text-orange-100 text-center">bg-gray-800 lg:bg-red-800</p> <p class="bg-gray-700 lg:bg-red-700 mb-5 h-10 w-[16rem] text-white text-center">bg-gray-700 lg:bg-red-700</p> <p class="bg-gray-600 lg:bg-red-600 mb-5 h-10 w-90 text-orange-100 text-center">bg-gray-600 lg:bg-red-600 </p> <p class="bg-gray-500 lg:bg-red-500 mb-5 h-10 w-[27rem] text-black-100 text-center text-white">bg-gray-500 lg:bg-red-500</p> </div> </body> </html>		Tailwind bg color - Breakpoints bg-gray-950 lg:bg-red-300 bg-gray-800 lg:bg-red-800 bg-gray-700 lg:bg-red-700 bg-gray-600 lg:bg-red-600 bg-gray-500 lg:bg-red-500

Tailwind bg color - Breakpoints