Tailwind Demo
Tailwind Code
Output
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-cyan-700 text-xl mx-10 mt-10 font-bold "> Tailwind background color demo </h1> <div class="flex flex-5 mx-8 mt-10 justify-between gap-2"> <div class="max-w-xs"> <p class="mb-10"> <button class="bg-orange-400 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> bg-orange-400 </button> </p> <p class="mb-10"> <button class="bg-amber-100 text-black py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> bg-amber-100 </button> </p> <p class="mb-10"> <button class="bg-lime-500 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> bg-lime-500 </button> </p> <p class="mb-10"> <button class="bg-sky-600 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> bg-sky-600 </button> </p> <p class="mb-10"> <button class="bg-red-500 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> bg-red-500 </button> </p> </div> </body> </html>
Tailwind background color demo
bg-orange-400
bg-amber-100
bg-lime-500
bg-sky-600
bg-red-500