JSFiddle - React, Tailwind, and code Playground

by nicotr014

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="x-apple-disable-message-reformatting" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A Summary of Today's Session - SessionTracker</title>
    <style type="text/css" rel="stylesheet" media="all">
    </style>
  </head>
  <body>
    <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
      <tr>
        <td align="center">
          <table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
            <tr>
              <td class="email-masthead">
                <a href="https://mysessiontracker.com" class="f-fallback email-masthead_name">
                  My Session Tracker
                </a>
              </td>
            </tr>
            <!-- Email Body -->
            <tr>
              <td class="email-body" width="570" cellpadding="0" cellspacing="0">
                <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
                  <!-- Body content -->
                  <tr>
                    <td class="content-cell">
                      <div class="f-fallback">
                        <h1 style="font-weight: 400;">Hi {{ <b>Nico</b> }},</h1>                 
                        <table class="client-info-table">
                          <tr>
                            <th class="avatar-container"><img class="avatar-img" src="https://cdn1.iconfinder.com/data/icons/avatar-3/512/Manager-512.png" /></th>
                            <th style="text-align: left;">{{ Big Steve's Gym }} just logged a session with you today!</th>
                          </tr>
                        </table>
              ...

CSS

/* Base ------------------------------ */
        
      @import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700|Source+Sans+Pro:400,700&amp;display=swap");
      
      body {
        width: 100% !important;
        height: 100%;
        margin: 0;
        -webkit-text-size-adjust: none;
        background-color: #F2F4F6;
        color: #51545E;
      }
      
      a {
        color: #3869D4;
      }
      
      a img {
        border: none;
      }
      
      td {
        word-break: break-word;
      }

      /* Type ------------------------------ */
      
      body,
      td,
      th,
      p {
        font-family: 'PT Sans', 'Helvetica', 'Arial', sans-serif;
        color: #5d5d5d;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.12px;
        line-height: 1.32;
      }

      h1, h2, h3, h4, h5, h6 {
        font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
        color: #2b2b2b;
        letter-spacing: 0.5px;
      }

      h1 {
        margin-top: 14px;
        margin-bottom: 14px;
        font-size: 24px;
      }

      h2, h3 {
        margin-top: 10px;
        margin-bottom: 4px;
        font-size: 18px;
      }
      
      td,
      th {
        font-size: 16px;
      }
      
      p,
      ul,
      ol,
      blockquote {
        margin: .4em 0 1.1875em;
        font-size: 16px;
        line-height: 1.625;
      }
      
      p.sub {
        font-size: 13px;
      }

      b, strong {
        font-weight: 700;
      }

      /* Utilities ------------------------------ */
      
      .align-right {
        text-align: right;
      }
      
      .align-left {
        text-align: left;
      }
      
      .align-center {
        text-align: center;
      }
     
      /* Data table ------------------------------ */
      
      .session {
        width: 100%;
        margin: 0;
        padding: 0 0 35px 0;
        -premailer-width: 100%;
        -premailer-cellpadding: 0;
       ...