JSFiddle - React, Tailwind, and code Playground

by sip

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Home work 30.11</title>
  </head>

  <body>
    <table>
      <tr class="level_1">
        <td></td>
        <td>starter</td>
        <td>econo</td>
        <td>standart</td>
        <td>professional</td>
      </tr>
      <tr class="level_2">
        <td>choose your plan</td>
        <td>$<span>10</span>
          <br>per month</td>
        <td>$<span>30</span>
          <br>per month</td>
        <td>$<span>59</span>
          <br>per month</td>
        <td>$<span>99</span>
          <br>per month</td>
      </tr>
      <tr class="level_3">
        <td>Amount of space</td>
        <td>10GB</td>
        <td>30GB</td>
        <td>100GB</td>
        <td>Unlimeted</td>
      </tr>
      <tr class="level_4">
        <td>Bandwidth</td>
        <td>100GB</td>
        <td>200GB</td>
        <td>500GB</td>
        <td>1000GB</td>
      </tr>
      <tr class="level_5">
        <td>No. off e-mail account</td>
        <td>1</td>
        <td>10</td>
        <td>50</td>
        <td>Unlimeted</td>
      </tr>
      <tr class="level_6">
        <td>No. off MySql databases</td>
        <td>1</td>
        <td>10</td>
        <td>50</td>
        <td>Unlimeted</td>
      </tr>
      <tr class="level_7">
        <td>24h support</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr class="level_8">
        <td>Support tickets per mo.</td>
        <td>1</td>
        <td>3</td>
        <td>5</td>
        <td>10</td>
      </tr>
      <tr class="level_9">
        <td></td>
        <td>
          <button>sign up!</button>
        </td>
        <td>
          <button>sign up!</button>
        </td>
        <td>
          <button>sign up!</button>
        </td>
        <td>
          <button>sign up!</button>
        </td>
      </tr>
    </table>
  </body>

</html>

CSS

table {
  border-spacing: 0px;
}

body {
  font-family: verdana;
}

tr.level_1 td {
  border-bottom: 2px solid #212121;
  background: linear-gradient(to top, #202020, #303030);
  width: 200px;
  height: 50px;
  color: #848685;
  text-align: center;
}

tr.level_2 td {
  background: linear-gradient(to top, #202020, #303030);
  width: 200px;
  height: 100px;
  color: #848685;
  text-align: center;
}

.level_2 span {
  font-size: 40px;
  color: #5bc8da;
}

.number {
  color: #5bc8da;
}

tr.level_3 td {
  width: 200px;
  height: 25px;
  color: #848685;
  text-align: center;
}

.level_3 td:nth-child(2n) {
  background-color: #ebebeb;
}

.level_3 td:nth-child(2n+1) {
  background-color: #e3e3e3;
}

tr.level_4 td {
  width: 200px;
  height: 25px;
  color: #848685;
  text-align: center;
}

.level_4 td:nth-child(2n) {
  background-color: #e3e3e3;
}

.level_4 td:nth-child(2n+1) {
  background-color: #ebebeb;
}

tr.level_5 td {
  width: 200px;
  height: 25px;
  color: #848685;
  text-align: center;
}

.level_5 td:nth-child(2n) {
  background-color: #ebebeb;
}

.level_5 td:nth-child(2n+1) {
  background-color: #e3e3e3;
}

tr.level_6 td {
  width: 200px;
  height: 25px;
  color: #848685;
  text-align: center;
}

.level_6 td:nth-child(2n) {
  background-color: #e3e3e3;
}

.level_6 td:nth-child(2n+1) {
  background-color: #ebebeb;
}

tr.level_7 td {
  width: 200px;
  height: 25px;
  color: #848685;
  text-align: center;
}

.level_7 td:nth-child(2n) {
  background-color: #ebebeb;
}

.level_7 td:nth-child(2n+1) {
  background-color: #e3e3e3;
}

tr.level_8 td {
  width: 200px;
  height: 25px;
  color: #848685;
  text-align: center;
}

.level_8 td:nth-child(2n) {
  background-color: #e3e3e3;
}

.level_8 td:nth-child(2n+1) {
  background-color: #ebebeb;
}

tr.level_9 td {
  background: linear-gradient(to top, #d5d5d5, #f3f3f3);
  width: 200px;
  height: 50px;
  color: #848685;
  text-align: center;
}

button {
  width: 90px;
  height: 22px
}