JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

{% capture email_title %}
    Security check
{% endcapture %}
<!DOCTYPE html>
<html lang="en">
    <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  
  <link rel="stylesheet" type="text/css" media="screen" href="/assets/admin/merchant_mailer/style.css">
  <style data-premailer="ignore">
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
    @media print{
      body {
        color: black !important;
      }

      .subtitle-lines,
      .subtotal-line__title,
      .subtotal-line__value {
        padding: 0 !important;
        margin: 0 !important;
      }

      .subtotal-table {
        margin: 0 !important;
      }
    }
  </style>
</head>

    <body>
        <table class="row">
            <tr class="mail-priority-indicator mail-priority-indicator--{% if fulfillment_aborted or has_high_risks? %}high{% else %}low{% endif %}">
                <td></td>
            </tr>
        </table>
        <table class="body">
            <tr>
                <td>
                    {% if fulfillment_aborted %}
                        <center>
                            <table class="row banner-container banner-alert__table">
    <tr>
        <td class="banner-alert__cell">
            <img src="{{ 'mailer/merchant/critical_alert.png' | cdn_asset_url }}" alt="Critical Alert" width="20px">
        </td>
        <td class="banner-description__cell">
            <strong class="banner-alert__title">Order was not fulfilled automatically</strong>
            High risk of fraud detected. Before fulfilling this order or capturing payment, please review the the Risk Analysis and determine if this order is fraudulent.
        </td>
    </tr>
</table>

                        </center>
                    {% endif %}
                    {% if has_high_risks? %}
              ...