JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="col-md-8">
   <h2 align="center"><i class="glyphicon glyphicon-home"></i> WELCOME ADMIN</h2>
   <ul class="dash">
      <li>
         <a href="calendar.php" title="Report" class="tip" data-placement="bottom" >
         <img src="images/icons/report.png" alt="" />
         <span>Report</span>
         </a>
      </li>
      <li>
         <a href="view.php" title="Customers" class="tip" data-placement="bottom" >
         <img src="images/icons/customers.png" alt="" />
         <span>Customers</span>
         </a>
      </li>
      <li>
         <a href="insert.php" title="Add Customers" class="tip" data-placement="bottom" >
         <img src="images/icons/add_customer.png" alt="" />
         <span>Add Customers</span>
         </a>
      </li>
      <li>
         <a href="member.php" title="Users" class="tip" data-placement="bottom" >
         <img src="images/icons/users.png" alt="" />
         <span>Users</span>
         </a>
      </li>
      <li>
         <a href="register3.php" title="Add User" class="tip" data-placement="bottom" >
         <img src="images/icons/add_user.png" alt="" />
         <span>Add User</span>
         </a>
      </li>
   </ul>
</div>

CSS

ul.dash {
    margin: 20px;
    display:block;
    float:left;
    width:100%;
    text-align:center;
    margin-left:0;
    padding-left:0;

}

ul.dash li {
    float:center;
    display:inline-block;
    margin:0 15px 15px 0;
}


ul.dash li a {
    display:block;
    width:106px;
    height:102px;
    text-decoration:none;
}

ul.dash li a img {
    display:inline;
    width:48px;
    margin-center:0px;
    margin-top:20px;
}

ul.dash li a span {
    display:block;
    width:100%;
    text-align:center;
    margin-top:10px;
    font-size:11px;
}
ul.dash li a {
     color:#000;
 background:url('../images/icons/largebut.png') 0 0 no-repeat;
}


ul.dash li a:hover {
 background:url('../images/icons/largebut_hover.png') 0 0 no-repeat;
}