JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<!-- // 16i – Email Signature // -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:800px; font-family: Arial, sans-serif; color:#0d0d0d;">
  
  <!-- // Spacer // -->
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>

  <!-- // Kind Regards // -->
  <tr>
    <td colspan="3" style="font-size:14px; line-height:1; color:#1D2745 !important; font-weight:400; padding-bottom:8px;">Kind Regards</td>
  </tr>

  <!-- // Spacer // -->
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>

  <tr>
    <!-- // Left: Logo // -->
    <td class="stack" width="108" valign="middle" style="padding:0 24px 0 0; vertical-align:top;">
      <a href="https://www.16i.co.uk" target="_blank" style="text-decoration:none; border:0;">
        <img src="https://clients.16i.co.uk/16i/email/16i_Logo_Cobalt_Blue.png" width="108" height="70 " alt="16i" style="display:block; border:0; outline:0; text-decoration:none;">
      </a>
    </td>

    <!-- // Divider // -->
    <td width="2" valign="top" style="background-color: #edede9; font-size:0; line-height:0;">&nbsp;</td>

    <!-- // Right: Details // -->
    <td class="stack" valign="top" style="padding: 0px 0px 0px 24px; vertical-align:top;">
      <div style="font-size:18px; line-height:1; font-weight:700; color:#3154AE; padding-bottom:8px;">Jordan Sayner</div>
      <div style="font-size:14px; line-height:1; font-weight:400; color:#1D2745; padding-bottom:8px;">Front-End Developer</div>

      <div style="font-size:13px; line-height:1; color:#1D2745 !important; font-weight:400; padding-top:10px;">
        Phone: <span style="color:#1D2745 !important; font-weight:600; text-decoration:none !important;">01242&#8203;&nbsp;654000</a>
      </div>
      
      <div style="font-size:13px; line-height:1; color:#1D2745 !important; font-weight:400; padding-top:10px;">
        Mobile: <span style="color:#1D2745 !important; font-weight:600; text-decoration:none...