JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<table style="margin-bottom:15px" >
 <tr>
 <td><a href="ts_cms.php"><img src="../images/admin/prop_btn.png"></a></td>
 <td><a href="#"><img src="../images/admin/pack_btn.png"></a></td>
 <td> <a href="#"><img src="../images/admin/blog_btn.png"></a></td>
 </tr>
 <tr>
 <td class= "menu1"><a href="ts_cms.php">Add property</a></td>
 <td class= "menu1"><a href="#">Add package</a></td>
 <td class= "menu1"><a href="#">Add Blog</a></td>
 </tr>
 </tr>
 <tr>
 <td class= "menu1"><a href="#">Remove property</a></td>
 <td class= "menu1"><a href="#">Remove package</a></td>
 <td class= "menu1"><a href="#">Remove Blog</a></td>
 </tr>
 </tr>
 <tr>
 <td class= "menu1"><a href="#">Update property</a></td>
 <td class= "menu1"><a href="#">Update package</a></td>
 <td class= "menu1"><a href="#">Update Blog</a></td>
 </tr>
 </tr>
 <tr>
 <td class= "menu1"><a href="#">List all properties</a></td>
 <td class= "menu1"><a href="#">List all packages</a></td>
 <td class= "menu1"><a href="#">List all Blogs</a></td>
 </tr>
 </table>

CSS

.menu1
{

  background-repeat:no-repeat;
  background-size:auto;
  margin-left:10px;
  background-position:center;
  background-image:url(../images/admin/menu_1.png);
  vertical-align:central;
  text-align:center;
  color:#FFF;
  }
    ,
 .menu1:hover{
  color:#0CF;
  background-image:url(../images/admin/menu_1_hover.png);

  }

.menu1 a
{
color:#FFF;
}  

.menu1 a:hover
{
color:#0CF;
} 
.menu1 a:active
{
color:#000;
}