<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container w3-animate-opacity">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Servers')">Servers List</button>
<button class="tablinks" onclick="openCity(event, 'Fruits')">Fruits Price</button>
<button class="tablinks" onclick="openCity(event, 'Workers')">Workers List</button>
</div>
<div id="Servers" class="tabcontent">
<table class="w3-animate-opacity">
<tr>
<th>Servers List</th>
<th>Status</th>
<th>Time</th>
</tr>
<tr>
<td>Ubuntu Server 16.04.4</td>
<td class="actived"><a href="#">Available</a></td>
<td>1 year, 11 months, 23 hours, 59minutes, 59seconds</td>
</tr>
<tr>
<td>Virtual Machine Windows Server 2002</td>
<td class="actived"><a href="#">Available</a></td>
<td>2 year, 11 months, 23 hours, 59minutes, 59seconds</td>
</tr>
<tr>
<td>Windows 10 Spark server</td>
<td class="deactivated"><a href="#">Unavailable</a></td>
<td>0 year, 6 months, 2 hours, 9minutes, 40seconds</td>
</tr>
<tr>
<td>Windows XP Professional</td>
<td class="deactivated"><a href="#">Unavailable</a></td>