Tailwind Demo
Tailwind Code
Output
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-cyan-700 text-lg mx-10 "> Tailwind background color - Table Hover </h1> <div class="flex flex-5 mx-8 mt-10 justify-between gap-2"> <table class="border-collapse border border-slate-400 "> <thead> <tr class="bg-teal-600 hover:bg-sky-500 text-white"> <th class="border border-yellow-300 px-10">Name</th> <th class="border border-yellow-300 px-10">Age</th> <th class="border border-yellow-300 px-10">Salary</th> </tr> </thead> <tbody> <tr class="bg-green-100 hover:bg-orange-800 text-center hover:text-white "> <td class="border border-yellow-300 ">Jim</td> <td class="border border-yellow-300 ">35</td> <td class="border border-yellow-300 ">$5000.00</td> </tr> <tr class="bg-green-100 hover:bg-orange-800 text-center hover:text-white"> <td class="border border-yellow-300 ">Anna</td> <td class="border border-yellow-300 ">24</td> <td class="border border-yellow-300 ">$3500.00</td> </tr> <tr class="bg-green-100 hover:bg-orange-800 text-center hover:text-white"> <td class="border border-yellow-300 ">Adams</td> <td class="border border-yellow-300 ">31</td> <td class="border border-yellow-300 ">$4000.00</td> </tr> </tbody> </table> </div> </div> </body> </html>
Tailwind background color - Table Hover
Name
Age
Salary
Jim
35
$5000.00
Anna
24
$3500.00
Adams
31
$4000.00