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; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; font-family:Arial, sans-serif; color:#0d0d0d;">
  
  <!-- // Kind Regards // -->
  <tr>
    <td colspan="4"><div style="font-size:14px; line-height:1; color:#1D2745 !important; font-weight:400; margin-top: 16px; margin-bottom: 24px;">Kind Regards</div></td>
  </tr>

  <tr>
    <!-- // Left: Logo // -->
    <td valign="top" width="108" style="padding:0 24px 0 0; vertical-align:top;	width: 108px;">
      <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="71" alt="16i" style="display:block; width: 108px; height: 71px; 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; width:2px; min-width:2px; max-width:2px;"><div style="width: 2px;"></div></td>

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

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