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: Hover State </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 hover:bg-orange-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> hover:bg-orange-800 </button> </p> <p class="mb-10"> <button class="bg-amber-400 hover:bg-amber-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> hover:bg-amber-800 </button> </p> <p class="mb-10"> <button class="bg-lime-500 hover:bg-lime-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> hover:bg-lime-800 </button> </p> <p class="mb-10"> <button class="bg-sky-600 hover:bg-sky-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> hover:bg-sky-800 </button> </p> <p class="mb-10"> <button class="bg-red-500 hover:bg-red-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline" type="button"> hover:bg-red-800 </button> </p> </div> </body> </html>
Tailwind background color: Hover State
hover:bg-orange-800
hover:bg-amber-800
hover:bg-lime-800
hover:bg-sky-800
hover:bg-red-800