<div class="main">
<table>
  <tr>
    <th class="basic">Basic</th>
    <th class="standard popular"><span class="no1">No.1</span>Standard</th>
    <th class="premium">Premium</th>
  </tr>
  <tr class="price">
    <td>¥0</td>
    <td class="popular">¥5,000</td>
    <td>¥8,000</td>
  </tr>
  <tr>
    <td>7 Days</td>
    <td class="popular">30 Days</td>
    <td>180 Days</td>
  </tr>
  <tr>
    <td><a href="#">Apply</a></td>
    <td><a href="#">Apply</a></td>
    <td><a href="#">Apply</a></td>
  </tr>
</table>
</div>
table {
  border: 0;
  border-collapse: collapse;
  border-radius: 8px;
  width: 100%;
}
th {
  border: solid 1px #5ceffe;
  padding: 16px 8px;
}
td {
  border: solid 1px #5ceffe;
  text-align: center;
  padding: 8px;
  color: #757575;
}
table td a{
  background-color: #25b327;
  color: white;
  padding:5px 20px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
}
.popular {
  position: relative;
}
.no1{
  position: absolute;
  top: -10px;
  background: #bdcc28;
  width: 60px;
  font-size: 10px;
  border-radius: 15px;
  line-height: 1;
  padding: 5px;
}
.basic {
  background-color: #0ceffe;
}
.standard {
  background-color: #039be5;
  border: 1px solid #039be5;
  color: white;
}
.premium {
  border: 1px solid #2e3a4d;
  background-color: #2e3a4d;
  color: white;
}
.price {
  font-size: 20px;
  font-weight: 800;
}
.price td {
  color: black;
}
.main {
  width: 80%;
  margin: 20px auto;
  justify-content: center;
  align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.