JSFiddle - React, Tailwind, and code Playground

by Alexandr Zawgorodniy

HTML

<table>
    <thead>
      <tr>
        <td></td>
        <td>starter</td>
        <td>econo</td>
        <td>standart</td>
        <td>professional</td>
      </tr>
      </thead>
      <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="odd">
        <td class="v">Amount of space</td>
        <td>10GB</td>
        <td>30GB</td>
        <td>100GB</td>
        <td>Unlimeted</td>
      </tr>
      <tr class="even">
        <td class="v">Bandwidth</td>
        <td>100GB</td>
        <td>200GB</td>
        <td>500GB</td>
        <td>1000GB</td>
      </tr>
      <tr class="odd">
        <td>No. off e-mail account</td>
        <td>1</td>
        <td>10</td>
        <td>50</td>
        <td>Unlimeted</td>
      </tr>
      <tr class="even">
        <td>No. off MySql databases</td>
        <td>1</td>
        <td>10</td>
        <td>50</td>
        <td>Unlimeted</td>
      </tr>
      <tr class="odd">
        <td>24h support</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr class="even">
        <td>Support tickets per mo.</td>
        <td>1</td>
        <td>3</td>
        <td>5</td>
        <td>10</td>
      </tr>
      <tfoot>
      <tr>
        <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>
      </tfoot>
    </table>

CSS

table {
  border-spacing: 0px;
}

body {
  font-family: verdana;
}

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

thead td {
  border-bottom: 2px solid #212121;
  background: linear-gradient(to top, #202020, #303030);
  height: 50px;
}

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

.level_2 span {
  font-size: 40px;
  color: #5bc8da;
}
.level_2 td:not(:first-child):first-letter{
  font-size: 40px;
}
.number {
  color: #5bc8da;
}

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

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


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

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

tfoot td {
  background: linear-gradient(to top, #d5d5d5, #f3f3f3);
  height: 50px;
 }

button {
  width: 90px;
  height: 22px
}
.odd :first-child, .even :first-child{
  text-align: left;
}