<table>
  <thead class="contents">
    <!--  column (card) presentation elements  -->
    <tr role="none" class="contents">
      <td id="card-a" class="card" />
      <td id="card-b" class="card" />
      <td id="card-c" class="card" />
    </tr>
    <!--  row (separator) presentation elements -->
    <tr role="none" class="contents desktop-only">
      <td id="separator-1" class="separator" />
      <td id="separator-2" class="separator" />
      <td id="separator-3" class="separator" />
    </tr>
    <tr class="contents">
      <td></td>
      <td style="grid-area: header-a">A</td>
      <td style="grid-area: header-b">B</td>
      <td style="grid-area: header-c">C</td>
    </tr>
  </thead>
  <tbody class="contents">
    <tr class="contents">
      <td style="grid-area: row1-header" class="desktop-only">Projects</td>
      <td style="grid-area: row1-a">1 Project</td>
      <td style="grid-area: row1-b">Up to 10 Projects</td>
      <td style="grid-area: row1-c">Unlimited Projects</td>
    </tr>
    <tr class="contents">
      <td style="grid-area: row2-header" class="desktop-only">Storage Space</td>
      <td style="grid-area: row2-a">1GB Storage</td>
      <td style="grid-area: row2-b">10GB Storage</td>
      <td style="grid-area: row2-c">100GB Storage</td>
    </tr>
    <tr class="contents">
      <td style="grid-area: row3-header" class="desktop-only">Support</td>
      <td style="grid-area: row3-a">Email Support</td>
      <td style="grid-area: row3-b">Real time Support</td>
      <td style="grid-area: row3-c">Priority Real time Support</td>
    </tr>
  </tbody>
</table>
.contents {
  display: contents;
}

table {
  display: grid;
  grid-template-columns: repeat(4, 160px);
  grid-template-rows: repeat(4, 70px);
  grid-template-areas: 
    '.            header-a  header-b  header-c'
    'row1-header  row1-a    row1-b    row1-c'
    'row2-header  row2-a    row2-b    row2-c'
    'row3-header  row3-a    row3-b    row3-c';
}

#card-a {
  grid-row: header-a /  span 4;
  grid-column: header-a / span 1;
}

#card-b {
  grid-row: header-b /  span 4;
  grid-column: header-b / span 1;
}

#card-c {
  grid-row: header-c /  span 4;
  grid-column: header-c / span 1;
}

#separator-1 {
  grid-row: row1-header / span 1;
  grid-column: row1-header / span 4;
}

#separator-2 {
  grid-row: row2-header / span 1;
  grid-column: row2-header / span 4;
}

#separator-3 {
  grid-row: row3-header / span 1;
  grid-column: row3-header / span 4;
}

/* BEGIN COSMETICS */
html {
  padding: 20px;
  font-family: Trebuchet MS, sans-serif;
  background: #FAFAFA;
}

body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #F9FAFB;
}

table {
  grid-gap: 0 16px;
}

thead td {
  font-size: 20px;
  text-decoration: underline;
  font-weight: 500;
}

td {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 14px;
  text-align: center;
}

tr td:first-of-type {
  font-weight: 500;
  justify-content: flex-start;
  color: #71717A;
}

.card {
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}

.separator {
  border-top: 1px solid #991B1B;
}

#card-a {
  background: #52525B;
}

#card-b {
  background: #27272A;
}

#card-c {
  background: #DC2626;
}
/* END COSMETICS */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.