JSFiddle - React, Tailwind, and code Playground

HTML

<table id='dialogTable' class='vCard'>
			<tbody class='adr'>
				<TR>
					<TD class="name">{{header.name}}</TD>
					<TD class="fn value">{{data.name}}</TD>
					<TD class="name">{{header.address}}</TD>
					<TD class="street-address value">{{data.street1}}</TD>
				</TR>
				        
				<TR>
					<TD class="name">{{header.company}}</TD>
					<TD class="org value">{{data.company}}</TD>
					<TD class="name"></TD>
					<TD class="extended-address value">{{data.street2}}</TD>
				</TR>
				<TR>
					<TD class="name">{{header.email}}</TD>
					<TD class="email value"><a href="mailto:{{data.email}}">{{data.email}}</a></TD>
					<TD class="name">{{header.city}}</TD>
					<TD class="locality value">{{data.city}}</TD>
				</TR>
				
				<!-- tel spans the next three TRs, and '.value' is already used as a class... -->
				
				<TR>
					<TD class="name">{{header.phone}}</TD>
					<TD class="value">{{data.phone1}}</TD>
					<TD class="name">{{header.state}}</TD>
					<TD class="region value">{{data.state}}</TD>
				</TR>
				
				<TR>
					<TD class="name">{{header.cellPhone}}</TD>
					<TD class="value">{{data.phone2}}</TD>
					<TD class="name">{{header.zipPostal}}</TD>
					<TD class="postal-code value">{{data.zip}}</TD>
				</TR>
				
				<TR>
					<TD class="name">{{header.fax}}</TD>
					<TD class="value">{{data.fax}}</TD>
					<TD class="name">{{header.pager}}</TD>
					<TD class="value">{{data.phone3}}</TD>
				</TR>
			</tbody>
		</table>