index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
        integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
        <link rel="stylesheet" href="./style.css">
    <title>13</title>
</head>
<body>
    <div class="container">
            <h1></h1>
    </div>
    <div class="table">
        <table>
            <colgroup class="basic"></colgroup>
            <colgroup class="plus"></colgroup>
            <colgroup class="delux"></colgroup>
            <colgroup class="pro"></colgroup>
            <thead>
<tr>
    <th class="green">
        <i class="fas fa-building"></i>
    </th>
    <th class="gray">
        <i class="fas fa-plus"></i>
    </th>
    <th>
        <i class="fas fa-plane"></i>
    </th>
    <th>
        <i class="fas fa-digital-tachograph"></i>
    </th>
</tr>
            </thead>
            <tbody>
<tr class="price">
    <td class="">Rs.500/-</td>
    <td class="light-gray">Rs.1500/-</td>
    <td>Rs.2500/-</td>
    <td>Rs.3500/-</td>
</tr>
<tr>
    <td class="green">50 pages</td>
    <td class="gray">75 pages</td>
    <td>unlimited</td>
    <td>unlimited</td>
</tr>
<tr>
    <td class="light-green">3 User</td>
    <td class="light-gray">5 User</td>
    <td>10 User</td>
    <td>Unlimited</td>
</tr>
<tr>
    <td class="green">10 Sites</td>
    <td class="gray">25 Sites</td>
    <td>100 Sites</td>
    <td>Unlimited</td>
</tr>
<tr>
    <td class="light-green">50 MB</td>
    <td class="light-gray">250 MB</td>
    <td>1GB MB</td>
    <td>5GB MB</td>
</tr>
<tr>
    <td class="green">Included</td>
    <td class="gray">Included</td>
    <td>Included</td>
    <td>Included</td>
</tr>
<tr>
    <td class="light-green"><i class="fas fa-check"></i></td>
    <td class="light-gray"><i class="fas fa-check"></i></td>
    <td><i class="fas fa-check"></i></td>
    <td><i class="fas fa-check"></i></td>
</tr>
<tr>
    <td class="green"><i class="fas fa-times"></i></td>
    <td class="gray"><i class="fas fa-check"></i></td>
    <td><i class="fas fa-check"></i></td>
    <td><i class="fas fa-check"></i></td>
</tr>


<tr>
    <td class="light-green"><i class="fas fa-times"></i></td>
    <td class="light-gray"><i class="fas fa-check"></i></td>
    <td><i class="fas fa-check"></i></td>
    <td><i class="fas fa-check"></i></td>
</tr>


<tr>
    <td class="green"><i class="fas fa-times"></i></td>
    <td class="gray"><i class="fas fa-times"></i></td>
    <td><i class="fas fa-check"></i></td>
    <td><i class="fas fa-check"></i></td>
</tr>
<tr>
    <td class="light-green"><i class="fas fa-times"></i></td>
    <td class="light-gray"><i class="fas fa-times"></i></td>
    <td><i class="fas fa-times"></i></td>
    <td><i class="fas fa-check"></i></td>
</tr>
            </tbody>
          <tfoot>
              <td><button>Sign up</button></td>
              <td><button>Sign up</button></td>
              <td><button>Sign up</button></td>
              <td><button>Sign up</button></td>
          </tfoot>
            
        </table>
    </div>
</body>
</html>