CodePen Embed - 2x2 Table Matrix recode

<table class="matrix-table">
 <thead class="thead">
  <tr>
   <th colspan="2" class="table-title">COVID Title here</th>
  </tr>
  <tr>
   <th>US</th>
   <th>global</th>
  </tr>
 </thead>
 <tbody class="tbody">
  <tr>
   <td id="us-cases-1">
    <div class="td-wrapper">
     <p class="stat">15,219</span></p>
     <p class="label">reported cases</p>
    </div>
   </td>
   <td id="global-cases-1">
    <div class="td-wrapper">
     <p class="stat">287,374</p>
     <p class="label">reported cases</p>
    </div>
   </td>
  </tr>
  <tr>
   <td id="us-deaths-1">
    <div class="td-wrapper">
     <p class="stat">201</p>
     <p class="label">reported deaths</p>
    </div>
   </td>
   <td id="global-deaths-1">
    <div class="td-wrapper">
     <p class="stat">11,895</p>
     <p class="label">reported deaths</p>
    </div>
   </td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td colspan="2" class="source">Source: Centers for Disease Control and Prevention and World Health Organization</td>
  </tr>
 </tfoot>
</table>
<br />
<br />
<table class="matrix-table">
 <thead class="thead">
  <tr>
   <th colspan="2" class="table-title">COVID Title here</th>
  </tr>
  <tr>
   <th style="background-color: rgba(55,15,200,.5);">US</th>
   <th style="background-color: rgba(0,0,0,.4);">global</th>
  </tr>
 </thead>
 <tbody class="tbody">
  <tr>
   <td id="us-cases-2">
    <div class="td-wrapper">
     <p class="stat">15,219</span></p>
     <p class="label">reported cases</p>
    </div>
   </td>
   <td id="global-cases-2">
    <div class="td-wrapper">
     <p class="stat">287,374</p>
     <p class="label">reported cases</p>
    </div>
   </td>
  </tr>
  <tr>
   <td id="us-deaths-2">
    <div class="td-wrapper">
     <p class="stat">201</p>
     <p class="label">reported deaths</p>
    </div>
   </td>
   <td id="global-deaths-2">
    <div class="td-wrapper">
     <p class="stat">11,895</p>
     <p class="label">reported deaths</p>
    </div>
   </td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td colspan="2" class="source">Source: Centers for Disease Control and Prevention and World Health Organization</td>
  </tr>
 </tfoot>
</table>

$blue: #528a85
$beige: rgba(50,0,0,.35)

.matrix-table
 margin: 0 auto
 padding: 0
 padding: 0
 border-collapse: collapse
 width: 400px
 max-width: 400px
 box-sizing: border-box
 

.tbody
 border-collapse: collapse

.thead
 font-weight: 500
 font-size: 105%
 color: white
 text-transform: uppercase
 text-shadow: 0 0 3px rgba(0,0,0,.5)
 
 th
  width: 50%
  height: 30px
 th:first-child
  background-image: linear-gradient(transparent 65%, rgba(0,15,15,.15))
  //mix-blend-mode: overlay
  background-color: $beige
 
 th:last-child
  background-color: $blue
  background-image: linear-gradient(transparent 65%, rgba(0,15,15,.15))
  
.thead .table-title
 background-color: #ffffff !important
 color: #000000
 text-shadow: none
 text-align: left
 background-image: none !important
 font-weight: 600
.tbody td
 background-size: 100% 155% 
 margin: 0
 padding: 0
 



.td-wrapper
 display: table
 width: 100%
 height: 175px
 background-image: radial-gradient(ellipse, transparent 35%, rgba(0,15,15,.2) 125%)
 background-color: rgba(0,50,0,.15)
 color: white
 text-shadow: 0 0 3px rgba(0,0,0,.5)
 
 
.stat
 font-size: 3.5em
 font-weight: 700
 text-align: center
 display: table-cell
 vertical-align: bottom
 height: 57%
 line-height: .95 !important
 padding: 0px
 margin-bottom: 0
 margin: auto 0
  
.label
 font-size: 15px
 display: table-row
 margin-top: 0
 text-align: center
 text-transform: uppercase
 font-weight: 700
 height: 43%
 padding: 0px
 
 
 

.source
 font-size: 9px
 color: #333
 font-weight: 600
 text-align: left
 font-style: italic
 box-sizing: border-box
 padding: 10px 0 10px 0 
 border-top: .5px solid rgba(255,255,255,.15)

#us-cases-1
 position: relative
 overflow: hidden 
 background-color: rgba(255,200,200,.5)
 &:before
  content: ""
  position: absolute
  display: block
  width: 100%
  height: 100%
  background-image: url('https://image.shutterstock.com/image-vector/usa-map-260nw-391935874.jpg')
  background-size: 110%
  background-repeat: no-repeat
  background-position: -10px 
  opacity: .5
  z-index: -1
  left: 0
  right: 0
  top: 0
  bottom: 0
 
#global-cases-1
 position: relative
 overflow: hidden
 background-color: rgba(0,100,120,.35)
  
 &:before
  content: ""
  display: block
  width: 100%
  height: 100%
  background-image: url('https://geology.com/world/public-domain-world-country-outline-map.gif')
  background-size: 175%
  background-repeat: no-repeat
  background-position: top
  mix-blend-mode: multiply
  position: absolute
  opacity: .35
  z-index: -1
  left: 0
  right: 0
  top: 0
  bottom: 0


 

  
#global-deaths-1
 position: relative
 overflow: hidden
 background-color: rgba(0,100,120,.4)
 
 &:before
  content: ""
  display: block
  position: absolute
  z-index: -1
  left: 0
  right: 0
  top: -10px
  bottom: 0
  width: 100%
  height: 100%
  background-image: url('https://i.postimg.cc/gcKXrXKB/Artboard-1-100.jpg')
  background-size: 75%
  mix-blend-mode: multiply
  opacity: .25
  background-repeat: no-repeat
  background-position: center
  

 
#us-deaths-1
 position: relative
 overflow: hidden
 background-color: rgba(255,200,200,.55)
 &:before
  content: ""
  display: block
  position: absolute
  z-index: -1
  left: 0
  right: 0
  top: -10px
  bottom: 0
  width: 100%
  height: 100%
  background-image: url('https://i.postimg.cc/gcKXrXKB/Artboard-1-100.jpg')
  background-size: 75%
  mix-blend-mode: multiply
  opacity: .45
  background-repeat: no-repeat
  background-position: center


#us-cases-2
 position: relative
 overflow: hidden 
 background-color: rgba(55,15,200,.5)
 &:before
  content: ""
  position: absolute
  display: block
  width: 100%
  height: 100%
  background-image: url('https://image.shutterstock.com/image-vector/usa-map-260nw-391935874.jpg')
  background-size: 110%
  background-repeat: no-repeat
  background-position: -10px 
  opacity: .5
  z-index: -1
  left: 0
  right: 0
  top: 0
  bottom: 0
 
#global-cases-2
 position: relative
 overflow: hidden
 background-color: rgba(0,0,0,.4)
  
 &:before
  content: ""
  display: block
  width: 100%
  height: 100%
  background-image: url('https://geology.com/world/public-domain-world-country-outline-map.gif')
  background-size: 175%
  background-repeat: no-repeat
  background-position: top
  mix-blend-mode: multiply
  position: absolute
  opacity: .35
  z-index: -1
  left: 0
  right: 0
  top: 0
  bottom: 0


 

  
#global-deaths-2
 position: relative
 overflow: hidden
 background-color: rgba(0,0,0,.4)
 
 &:before
  content: ""
  display: block
  position: absolute
  z-index: -1
  left: 0
  right: 0
  top: -10px
  bottom: 0
  width: 100%
  height: 100%
  background-image: url('https://i.postimg.cc/gcKXrXKB/Artboard-1-100.jpg')
  background-size: 75%
  mix-blend-mode: multiply
  opacity: .25
  background-repeat: no-repeat
  background-position: center
  

 
#us-deaths-2
 position: relative
 overflow: hidden
 background-color: rgba(55,15,200,.5)
 &:before
  content: ""
  display: block
  position: absolute
  z-index: -1
  left: 0
  right: 0
  top: -10px
  bottom: 0
  width: 100%
  height: 100%
  background-image: url('https://i.postimg.cc/gcKXrXKB/Artboard-1-100.jpg')
  background-size: 75%
  mix-blend-mode: multiply
  opacity: .45
  background-repeat: no-repeat
  background-position: center

View Compiled

This Pen is owned by David Molinatto on CodePen.

See more by @brambleBush on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.