JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<!-- OUTLOOK-SAFE SIGNATURE (fluid width; avoids mobile zoom-out) -->
<table cellpadding="0" cellspacing="0" border="0" width="100%"
  style="margin-top:24px; border-collapse:collapse; font-family: Arial, Helvetica, sans-serif; color:#292E3E;">
  
  <tr>
    <td style="font-size:14px; line-height:16px; color:#292E3E;">
      Kind Regards
    </td>
  </tr>

  <!-- Top row: logo + name block -->
  <tr>
    <td style="padding:0;">
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-top:24px; border-collapse:collapse;">
        <tr>
          <!-- LEFT: 16i logo (keep fixed so it doesn't blow out) -->
          <td valign="middle" width="100" style="width:100px; padding:0 24px 16px 0;">
            <img
              src="https://www.16i.co.uk/media/011p15fu/16i-email-sig-logo.png"
              width="100"
              height="65"
              alt="16i"
              style="display:block; border:0; outline:none; text-decoration:none;"
            />
          </td>

          <!-- RIGHT -->
          <td valign="top" style="padding:0 0 16px 0;">
            <span style="display: block;font-size:18px; line-height:22px; font-weight:700; color:#3352B0;">Jordan Sayner</span>
            <span style="display: block;font-size:14px; line-height:18px; color:#292E3E; padding-top:4px;">Front End Developer</span>
            <span style="display: block;font-size:13px; line-height:18px; color:#292E3E; padding-top:8px;">
              Phone:
              <a href="tel:01242654000" style="color:#292E3E; text-decoration:none; font-weight:700;">01242 654000</a>
            </span>
          </td>
        </tr>
      </table>
    </td>
  </tr>

  <!-- Services line -->
  <tr>
    <td style="font-size:12px; line-height:16px; color:#292E3E;">
      Website Design &amp; Development
      <span style="color:#3352B0; padding:0 10px;">&bull;</span>
      Bespoke Software
      <span style="color:#3352B0;...