JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Directory</title>
  </head>
  <body class="letter">
    <table>
          <tr class="odd">
      
                                      <td rowspan="4" colspan="2" class="title">
              <h1>Employee Directory</h1>
              <h2>October 5, 2018</h2>
            </td>
            
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxxxxxx, xxxxxxxxx</td>
          <td class="extension">0000</td>
        
      
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxxxx, xxxxxxxxx</td>
          <td class="extension">0000</td>
        
      
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxxxxxx, xxxxxxx</td>
          <td class="extension">0000</td>
        
      
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxx, xxxxxxxxxxx</td>
          <td class="extension">0000</td>
        
      
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxxxx, xxxxxxx</td>
          <td class="extension">0000</td>
        
            </tr>
          <tr class="even">
      
                                      
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxxxxx, xxxxxxxxxx</td>
          <td class="extension">0000</td>
        
      
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxxxx, xxxxxxxxxxx</td>
          <td class="extension">0000</td>
        
      
                          <td class="padding">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        
                  <td>xxxx, xxxxxxxxxxx</td>
          <td class="extension">0000</td>
        
      
            ...

CSS

@media all {
	html {
	  size: letter landscape;
	  margin: 5.0mm;
	}

	h1 {
	  font-size: 14pt;
	  line-height: 20pt;
	  margin: 0;
	}

	h2 {
	  font-size: 13pt;
	  line-height: 13pt;
	  font-style: italic;
	  margin: 0;
	}

	table {
	  font-size: 10pt;
	  line-height: 10pt;
	  width: 100%;
	  border-collapse: collapse;
	}

	tr.odd {
	  background-color: #f4f4f4;
	}

	td {
	  padding: 0;
	}

	td.title {
	  text-align: center;
	  vertical-align: top;
	}

	td.extension {
	  text-align: right;
	}

	tr.odd td.title,
	tr.odd td.padding,
	tr.odd td.empty {
	  background-color: #ffffff;
	}
}