JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<!-- OUTLOOK-SAFE SIGNATURE (tables + inline styles) -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding-top: 24px; max-width:800px; font-family: Arial, Helvetica, sans-serif; color:#292E3E;">
  <tr>
    <td colspan="2" style="padding:0 0 16px 0; font-size:0.85rem; line-height:16px; color:#292E3E;">
      Kind Regards
    </td>
  </tr>

  <!-- Top row: logo + name block -->
  <tr>
    <td valign="middle" style="width:100px; padding:0 24px 16px 0;">
      <img
        src="https://www.16i.co.uk/media/011p15fu/16i-email-sig-logo.png"
        width="100px"
				height="65px"
        alt="16i"
        style="display:block; border:0; outline:none; text-decoration:none;"
      />
    </td>

    <td valign="middle" style="padding:0 0 16px 0;">
      <div style="font-size:1.115rem; font-weight:700; color:#3352B0;">Jordan Sayner</div>
      <div style="font-size:0.9rem; color:#292E3E; padding-top: 4px;">Front End Developer</div>
      <div style="font-size:0.8rem; color:#292E3E; padding-top: 8px;">
        Phone:
        <a href="tel:01242654000" style="color:#292E3E; text-decoration:none; font-weight:700;">01242 654000</a>
      </div>
    </td>
  </tr>
</table>

<!-- Services line -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:800px; font-family: Arial, Helvetica, sans-serif; color:#292E3E;">
  <tr>
    <td colspan="2" style="font-size:0.75rem; line-height:16px; color:#292E3E;">
      Website Design &amp; Development
      <span style="color:#3352B0; padding:0 10px;">&bull;</span>
      Bespoke Software
      <span style="color:#3352B0; padding:0 10px;">&bull;</span>
      Branding &amp; Creative Direction
    </td>
  </tr>

  <!-- Address line -->
  <tr>
    <td colspan="2" style="padding: 16px 0 0 0; font-size:0.75rem; line-height:14px; color:#6C7175;">
      <strong>16 Interactive Ltd</strong>
      <span style="color:#6C7175; padding:0...