Closed vlknhslk closed 3 years ago
cossssmin
commented
3 years ago Depends on how you coded it and if your ESP does something to the code when sending it. Maizzle doesn't do any magic regarding that, what you code is what you get.
Could be something in the <style> tag that's causing Gmail do discard it, but it could also be other reasons.
vlknhslk
commented
3 years ago Thank you Cosmin. I tried to added my code below. If you could review it, i'd really appreciate it.
This is my template file:
---
title: Hello there
preheader: Well, hot dog
---
<extends src="src/layouts/default.html">
<block name="template">
<table class="wrapper w-full Poppins border-b-2 mb-10 bg-gray-500">
<tr>
<td align="center" class="bg-white">
<table class="w-640 sm:w-full">
<tr>
<td class="bg-white px-40 py-48 sm:px-16 sm:py-24 text-left ">
<div class="mb-24">
<a href="https://www.example.me" class="no-underline">
<img
src="example.svg"
alt="example.me"
width="160"
/>
</a>
</div>
<p class="text-18 text-shadow-800 m-0 leading-28">
Hi John, 🚀
</p>
<div class="leading-20 sm:h-20"> </div>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>It’s not just Friday.</strong> It’s the Friday before
a holiday weekend, and your dear newsletter writers are
fleeing our laptops for East Coast beaches after we hit Send.
Do an anti-rain dance for us—we’ll let you know if it worked
in our next newsletter on Wednesday.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>In today’s edition: </strong>
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<ul class="text-18 text-shadow-800 leading-28">
<li>Mystery Veggie Meag</li>
<li>A word on OnlyFans</li>
<li>Heineken have a PSa</li>
</ul>
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10 italic">
Phoebe Bain, Ryan Barwick, Minda Smiley
</p>
<div class="leading-16 sm:h-16"> </div>
<table class="w-full mt-20">
<tr>
<td align="left" class="pb-48">
<span
class="bg-brand-50 border-brand-50 border-solid text-brand-500 text-12 rounded-8"
style="
border-width: 2px 10px;
mso-border-width-alt: 6px;
mso-text-raise: 5px;
"
>Brands</span
>
<h2 class="font-normal mb-16 mt-0">
<a
href="https://example.com"
class="text-shadow-800 text-28 leading-30 hover:underline hover:text-brand-500 align-middle"
>Hot dogs, the underdog of plant-based meat</a
>
</h2>
<a href="https://example.com">
<img
src="https://ci6.googleusercontent.com/proxy/PKMTSrvwN0TOhYr3RxbxoYxgu9XZQqry0lG_S_1ngLxwsvR65kyY6ic7tQsYBziq5D9jTU5chLxEUuQ_MKJBnZ6euOpBwkcZwryWTysrZ5vOrYNlnIl8PXNILXVkE5KIw06vYxntDROMzCZ1rRLuVP9FA65k4IEUEqFP7MD4yBHSFrVDCntrEhACjx12UTjboQVMogpTJZ41qCSbXtr3nDCDirvNtwMsOoD3NYjipAHBwgQOHL6U81nvNjcMHB-bxbszQpedTXBoqCVh17nsam5CCLUhGD_6YA9cesvWfu7LD7F43kIj5Br3zr2m=s0-d-e1-ft#https://dlp31coh2a67q.cloudfront.net/eyJrZXkiOiJ1cGxvYWRzL21lZGl1bS9hc3NldC81Mjc2L3BsYW50LWJhc2VkX2hvdF9kb2cuanBnIiwiYnVja2V0Ijoib3Nsby1wcm9kdWN0aW9uIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOm51bGx9fX0="
width="560"
alt="iPad Pro"
/>
</a>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
This weekend officially marks the start of Hot Dog Season—or its other name, summer.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
In 2019, Americans bought a whopping 271 million pounds of hot dogs between mid-May and mid-August, according to 210 Analytics. That’s a lot of dogs. This grilling season, many people will opt for a meat-free dog, as plant-based alternatives have become more and more ubiquitous.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
But the hot dog is the underdog of the veggie category, as neither Beyond Meat nor Impossible Foods makes a frank. That could change soon, though. Several brands, including Nathan’s Famous and Nestlé’s Sweet Earth, have rolled out their first attempts at plant-based dogs ahead of summer. </p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>Hot vax dog summer
</strong>
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
Hot dog sales still pale in comparison to ground beef—try ordering a hot dog at McDonald’s.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
“Beyond and Impossible have a goal of really reducing meat consumption, so they're going to go first for the things that people eat the most of,” Karen Formanski, an analyst who researches the plant-based food category for marketing research firm Mintel, told Marketing Brew.
</p>
</td>
</tr>
</table>
<table class="w-full">
<tr>
<td align="left" class="pb-48">
<span
class="bg-brand-50 border-brand-50 border-solid text-brand-500 text-12 rounded-8"
style="
border-width: 2px 10px;
mso-border-width-alt: 6px;
mso-text-raise: 5px;
"
>Campaigns</span
>
<h2 class="font-normal mb-16 mt-0">
<a
href="https://example.com"
class="text-shadow-800 text-28 leading-30 hover:underline hover:text-brand-500 align-middle"
>OnlyFans isn’t only sex</a
>
</h2>
<a href="https://example.com">
<img
src="https://ci5.googleusercontent.com/proxy/74277-KFEHLdu-snz8XKNeoVcqfJ8SDhAqikZ9dEUA8X4DHI_jGc4Dnzn2Xmrmh0SuN5FLP2UipjKO-yEVhOC4424fO2DgWXklWWnS61TBE5vYHc2QVc0LoUaZQnjHfqbS3979EmwvqjNxnhiSiVTUfrmhBxK7UOx5Bo7tuDQgmqBsMuwTuut100J9Y5-BmWoKXankjXkmyWyY9olvtQIOBvCAZTkE-CsKsncuzJUOMVS_gLzgWlpQTXT3E8lYy7WLcIjAej4z7XD-n4CxnK6ePRZoWr6H8p_gnk7f4xTaDH7w16mTfSCDM=s0-d-e1-ft#https://dlp31coh2a67q.cloudfront.net/eyJrZXkiOiJ1cGxvYWRzL21lZGl1bS9hc3NldC81MjczL2Nhcmxfc19qcl9jaGlja2VuLmpwZyIsImJ1Y2tldCI6Im9zbG8tcHJvZHVjdGlvbiIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6MTAwMCwiaGVpZ2h0IjpudWxsfX19"
width="560"
alt="iPhone XR"
/>
</a>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
After hearing about Carl’s Jr. and Hardee’s new OnlyFans campaign, we couldn’t help but wonder...what’s the right way to advertise on a platform known as a porn site?
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>ICYMI:</strong> The burger chains are promoting their new chicken sandwiches via an OnlyFans channel called “Hot and Hand-Breaded.” The content plays on OnlyFan’s NSFW reputation with “suggestive videos,” like one that shows “disembodied hands caressing hamburger buns,” per Adweek.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong> It wouldn’t be the first time:</strong> Remember condiment company Fly By Jing’s “hot noods” promotion? (More on that later.) </p>
<p class=" text-28 text-shadow-800 m-0 leading-28 my-20">But not everyone’s convinced sex-related branded content is right for OnlyFans.</p>
<p class=" text-18 text-shadow-800 m-0 leading-28 my-10">
“I think it's a bad idea for two reasons,” Kinsey Grant, who recently researched the porn industry (and OnlyFans specifically) for her podcast and newsletter Thinking Is Cool, told Marketing Brew.
</p>
<p class=" text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>Number one:</strong> Grant told us OnlyFans wants to position itself as “the kind of company that is for anybody, not just for explicit content. They don't want to be the place you go for porn.” She added that the platform makes pornographic content intentionally difficult to locate for this exact reason. </p>
</td>
</tr>
</table>
<table class="w-full">
<tr>
<td align="left">
<span
class="bg-brand-50 border-brand-50 border-solid text-brand-500 text-12 rounded-8"
style="
border-width: 2px 10px;
mso-border-width-alt: 6px;
mso-text-raise: 5px;
"
>Sponsored by Stackadapt</span
>
<h2 class="font-normal mb-16 mt-0">
<a
href="https://example.com"
class="text-shadow-800 text-28 leading-30 hover:underline hover:text-brand-500 align-middle"
>Get with the Program(matic)</a
>
</h2>
<a href="https://example.com">
<img
src="https://ci5.googleusercontent.com/proxy/O7J6mSLt-ee583BFdQlggZWAhS0_HtGbg9--IwnDg5RnNKdl6_cvwFT71xhzZhBc-PvrIpksYEVLkEZICfJKRiFvSkYjGI6dzXW7viTVZNhjzEzm54UMv11J4wlNmiogzWvmKI_bXk0m8TrjVNMV3ThtVK1QWupduJNIlyQSmuvEiUBz1j1fHyFfCNhc7XLYwMRsAUxRA8H-XxgixUfLm-AtaEPWZsRhX6-JZGulUxfFdv09k4rGujqgpq9YmJWJ6Z3JvSB06DCsJErorB5ZM4_wthYeByIZJ46rVCgGva08gZQLqXkXhGtr5hD5yFd1dhAcLa8OjWaplD8W0SHsnDYkTBbxdU0yWgQZkEGJ7es6Ugoae6QkK114KvC8twSWbCreCR8=s0-d-e1-ft#https://dlp31coh2a67q.cloudfront.net/eyJrZXkiOiJ1cGxvYWRzL3BsYWNlbWVudC9pbWFnZXMvMjA2NC8xNjIwNDE1NzEzLUJ1c2luZXNzLUNhc2UtZm9yLVByb2dyYW1tYXRpYy1MYW5kaW5nLVBhZ2UucG5nIiwiYnVja2V0IjoiY29tZXQtbW9ybmluZ2JyZXciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjEwMDAsImhlaWdodCI6bnVsbH19fQ=="
width="560"
alt="iMac"
/>
</a>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
Programmatic advertising has a lot to offer. As StackAdapt explains in this business case, programmatic solves the problem of where to buy media and <strong>lets buyers focus entirely on quality, performance, and return on spend</strong>.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
You may have heard something about minimum spends. But what if we told you that not all programmatic platforms require them?
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
You’d be like, get outta here. But it’s true—and that’s the kind of insight you’ll get in StackAdapt’s business case. You’ll also learn about the many benefits of programmatic ads, including:
</p>
</td>
</tr>
</table>
<component src="src/partials/brew-footer.html"></component>
</td>
</tr>
</table>
</td>
</tr>
</table>
</block>
</extends>This is my build version:
<!DOCTYPE html>
<html
lang="en"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
>
<head>
<meta charset="utf-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="format-detection"
content="telephone=no, date=no, address=no, email=no"
/>
<!--[if mso]>
<xml
><o:OfficeDocumentSettings
><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings
></xml
>
<style>
td,
th,
div,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI", sans-serif;
mso-line-height-rule: exactly;
}
</style>
<![endif]-->
<style>
@import url("https://use.typekit.net/lnv2zme.css") body {
margin: 0;
width: 100%;
padding: 0;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
img {
border: 0;
max-width: 100%;
vertical-align: middle;
line-height: 100%;
}
a {
color: #0047c3;
text-decoration: none;
}
/*! purgecss end ignore */
/* Tailwind components that are generated by plugins */
/**
* @import here any custom components - classes that you'd want loaded
* before the Tailwind utilities, so that the utilities could still
* override them.
*/
/* Tailwind utility classes */
.m-0 {
margin: 0 !important;
}
.my-10 {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.my-20 {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.my-16 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mb-16 {
margin-bottom: 16px !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-24 {
margin-bottom: 24px !important;
}
.mt-8 {
margin-top: 8px !important;
}
.mb-12 {
margin-bottom: 12px !important;
}
.mb-8 {
margin-bottom: 8px !important;
}
.mt-16 {
margin-top: 16px !important;
}
.mb-32 {
margin-bottom: 32px !important;
}
.mb-4 {
margin-bottom: 4px !important;
}
.mb-28 {
margin-bottom: 28px !important;
}
.mt-32 {
margin-top: 32px !important;
}
.mr-6 {
margin-right: 6px !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.block {
display: block !important;
}
.inline-block {
display: inline-block !important;
}
.table {
display: table !important;
}
.list-item {
display: list-item !important;
}
.hidden {
display: none !important;
}
.h-px {
height: 1px !important;
}
.h-24 {
height: 24px !important;
}
.h-2 {
height: 2px !important;
}
.h-12 {
height: 12px !important;
}
.h-32 {
height: 32px !important;
}
.h-8 {
height: 8px !important;
}
.h-full {
height: 100% !important;
}
.h-18 {
height: 18px !important;
}
.w-full {
width: 100% !important;
}
.w-640 {
width: 640px !important;
}
.w-72 {
width: 72px !important;
}
.w-488 {
width: 488px !important;
}
.w-88 {
width: 88px !important;
}
.w-200 {
width: 200px !important;
}
.w-1\/2 {
width: 50% !important;
}
.w-146 {
width: 146px !important;
}
.w-336 {
width: 336px !important;
}
.w-118 {
width: 118px !important;
}
.w-2\/3 {
width: 66.666667% !important;
}
.w-100 {
width: 100px !important;
}
.w-272 {
width: 272px !important;
}
.w-56 {
width: 56px !important;
}
.w-18 {
width: 18px !important;
}
.w-176 {
width: 176px !important;
}
.w-416 {
width: 416px !important;
}
.w-12 {
width: 12px !important;
}
.w-120 {
width: 120px !important;
}
.w-289 {
width: 289px !important;
}
.w-92 {
width: 92px !important;
}
.list-none {
list-style-type: none !important;
}
.rounded-md {
border-radius: 0.375rem !important;
}
.rounded {
border-radius: 4px !important;
}
.rounded-full {
border-radius: 9999px !important;
}
.rounded-t {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.rounded-b {
border-bottom-right-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
.border {
border-width: 1px !important;
}
.border-b-2 {
border-bottom-width: 2px !important;
}
.border-solid {
border-style: solid !important;
}
.border-brand-50 {
border-color: #ecf3ff !important;
}
.border-gray-200 {
border-color: #d1d6de !important;
}
.border-brand-600 {
border-color: #0047c3 !important;
}
.bg-white {
background-color: #ffffff !important;
}
.bg-gray-100 {
background-color: #f1f3f5 !important;
}
.bg-brand-500 {
background-color: #0052e2 !important;
}
.bg-red-50 {
background-color: #fef2f2 !important;
}
.bg-pacific-700 {
background-color: #147b89 !important;
}
.bg-gray-500 {
background-color: #8492a6 !important;
}
.bg-brand-50 {
background-color: #ecf3ff !important;
}
.bg-green-50 {
background-color: #ecfdf5 !important;
}
.p-20 {
padding: 20px !important;
}
.p-24 {
padding: 24px !important;
}
.p-16 {
padding: 16px !important;
}
.p-4 {
padding: 4px !important;
}
.p-0 {
padding: 0 !important;
}
.px-40 {
padding-left: 40px !important;
padding-right: 40px !important;
}
.py-48 {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.py-12 {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.py-16 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.px-32 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.py-20 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.py-64 {
padding-top: 64px !important;
padding-bottom: 64px !important;
}
.py-24 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.py-10 {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.px-12 {
padding-left: 12px !important;
padding-right: 12px !important;
}
.px-8 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.px-4 {
padding-left: 4px !important;
padding-right: 4px !important;
}
.px-20 {
padding-left: 20px !important;
padding-right: 20px !important;
}
.px-16 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.py-2 {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
.pt-48 {
padding-top: 48px !important;
}
.pb-16 {
padding-bottom: 16px !important;
}
.pt-64 {
padding-top: 64px !important;
}
.pb-8 {
padding-bottom: 8px !important;
}
.pr-8 {
padding-right: 8px !important;
}
.pb-32 {
padding-bottom: 32px !important;
}
.pl-8 {
padding-left: 8px !important;
}
.pt-24 {
padding-top: 24px !important;
}
.pr-16 {
padding-right: 16px !important;
}
.pt-12 {
padding-top: 12px !important;
}
.pb-64 {
padding-bottom: 64px !important;
}
.pl-0 {
padding-left: 0 !important;
}
.pl-24 {
padding-left: 24px !important;
}
.pb-24 {
padding-bottom: 24px !important;
}
.pl-20 {
padding-left: 20px !important;
}
.pb-48 {
padding-bottom: 48px !important;
}
.pr-12 {
padding-right: 12px !important;
}
.pt-14 {
padding-top: 14px !important;
}
.pl-16 {
padding-left: 16px !important;
}
.pt-30 {
padding-top: 30px !important;
}
.pr-6 {
padding-right: 6px !important;
}
.pl-136 {
padding-left: 136px !important;
}
.pt-2 {
padding-top: 2px !important;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.align-top {
vertical-align: top !important;
}
.align-middle {
vertical-align: middle !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.font-sans {
font-family: "sofia-pro", Helvetica, Arial, Verdana system-ui,
sans-serif !important;
}
.text-xl {
font-size: 1.25rem !important;
line-height: 1.75rem !important;
}
.text-16 {
font-size: 16px !important;
}
.text-12 {
font-size: 12px !important;
}
.text-21 {
font-size: 21px !important;
}
.text-14 {
font-size: 14px !important;
}
.text-28 {
font-size: 28px !important;
}
.text-50 {
font-size: 50px !important;
}
.font-bold {
font-weight: 700 !important;
}
.font-normal {
font-weight: 400 !important;
}
.uppercase {
text-transform: uppercase !important;
}
.capitalize {
text-transform: capitalize !important;
}
.italic {
font-style: italic !important;
}
.leading-16 {
line-height: 16px !important;
}
.leading-22 {
line-height: 22px !important;
}
.leading-28 {
line-height: 28px !important;
}
.leading-px {
line-height: 1px !important;
}
.leading-32 {
line-height: 32px !important;
}
.leading-12 {
line-height: 12px !important;
}
.leading-24 {
line-height: 24px !important;
}
.leading-2 {
line-height: 2px !important;
}
.leading-64 {
line-height: 64px !important;
}
.leading-30 {
line-height: 30px !important;
}
.leading-48 {
line-height: 48px !important;
}
.leading-10 {
line-height: 10px !important;
}
.leading-20 {
line-height: 20px !important;
}
.leading-56 {
line-height: 56px !important;
}
.leading-full {
line-height: 100% !important;
}
.leading-40 {
line-height: 40px !important;
}
.text-gray-500 {
color: #8492a6 !important;
}
.text-gray-700 {
color: #637389 !important;
}
.text-gray-900 {
color: #4a5566 !important;
}
.text-brand-500 {
color: #0052e2 !important;
}
.text-white {
color: #ffffff !important;
}
.text-red-500 {
color: #ef4444 !important;
}
.text-red-900 {
color: #7f1d1d !important;
}
.text-red-700 {
color: #b91c1c !important;
}
.text-shadow-800 {
color: #423f3f !important;
}
.text-gray-800 {
color: #576478 !important;
}
.text-pacific-700 {
color: #147b89 !important;
}
.text-green-600 {
color: #059669 !important;
}
.no-underline {
text-decoration: none !important;
}
.shadow {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}
/* Your custom utility classes */
.mso-leading-exactly {
mso-line-height-rule: exactly;
}
.mso-hide-all {
mso-hide: all;
}
.hover\:bg-brand-600:hover {
background-color: #0047c3 !important;
}
.hover\:bg-pacific-600:hover {
background-color: #0c90ab !important;
}
.hover\:text-pacific-700:hover {
color: #147b89 !important;
}
.hover\:text-brand-500:hover {
color: #0052e2 !important;
}
.hover\:text-brand-700:hover {
color: #003ca5 !important;
}
.hover\:underline:hover {
text-decoration: underline !important;
}
@media (max-width: 640px) {
.sm\:mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.sm\:mt-16 {
margin-top: 16px !important;
}
.sm\:mb-16 {
margin-bottom: 16px !important;
}
.sm\:mb-8 {
margin-bottom: 8px !important;
}
.sm\:mt-24 {
margin-top: 24px !important;
}
.sm\:block {
display: block !important;
}
.sm\:inline-block {
display: inline-block !important;
}
.sm\:inline {
display: inline !important;
}
.sm\:table {
display: table !important;
}
.sm\:table-caption {
display: table-caption !important;
}
.sm\:table-footer-group {
display: table-footer-group !important;
}
.sm\:table-header-group {
display: table-header-group !important;
}
.sm\:hidden {
display: none !important;
}
.sm\:h-28 {
height: 28px !important;
}
.sm\:h-16 {
height: 16px !important;
}
.sm\:h-10 {
height: 10px !important;
}
.sm\:h-20 {
height: 20px !important;
}
.sm\:h-24 {
height: 24px !important;
}
.sm\:h-32 {
height: 32px !important;
}
.sm\:h-64 {
height: 64px !important;
}
.sm\:h-40 {
height: 40px !important;
}
.sm\:w-full {
width: 100% !important;
}
.sm\:w-auto {
width: auto !important;
}
.sm\:border-0 {
border-width: 0px !important;
}
.sm\:border-none {
border-style: none !important;
}
.sm\:p-24 {
padding: 24px !important;
}
.sm\:p-0 {
padding: 0 !important;
}
.sm\:px-16 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.sm\:py-24 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.sm\:py-16 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.sm\:px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.sm\:pb-32 {
padding-bottom: 32px !important;
}
.sm\:pb-8 {
padding-bottom: 8px !important;
}
.sm\:pt-24 {
padding-top: 24px !important;
}
.sm\:pl-0 {
padding-left: 0 !important;
}
.sm\:pr-20 {
padding-right: 20px !important;
}
.sm\:text-left {
text-align: left !important;
}
.sm\:text-center {
text-align: center !important;
}
.sm\:text-right {
text-align: right !important;
}
.sm\:align-top {
vertical-align: top !important;
}
.sm\:text-14 {
font-size: 14px !important;
}
.sm\:leading-48 {
line-height: 48px !important;
}
}
</style>
</head>
<body class="bg-white" lang="en">
<div class="hidden">
Well, hot dog͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ‌
 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ‌
 ͏ ͏ ͏ ͏ ͏
</div>
<div
role="article"
aria-roledescription="email"
aria-label="Marketing Brew"
lang="en"
>
<table
class="wrapper w-full font-sans border-b-2 mb-10 bg-gray-500"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td align="center" class="bg-white">
<table
class="w-640 sm:w-full"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td class="bg-white px-40 py-48 sm:px-16 sm:py-24 text-left">
<div class="mb-24">
<a href="https://www.example.me" class="no-underline">
<img
src="https://res.cloudinary.com/db9qyy1nu/image/upload/v1622507645/Emails/example.svg"
alt="example.com"
width="160"
/>
</a>
</div>
<p class="text-18 text-shadow-800 m-0 leading-28">
Hi Serkan, 🚀
</p>
<div class="leading-20 sm:h-20"> </div>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>{{content}} It’s not just Friday.</strong> It’s the
Friday before a holiday weekend, and your dear newsletter
writers are fleeing our laptops for East Coast beaches after
we hit Send. Do an anti-rain dance for us—we’ll let you know
if it worked in our next newsletter on Wednesday.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>In today’s edition: </strong>
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10"></p>
<ul class="text-18 text-shadow-800 leading-28">
<li>Mystery Veggie Meag</li>
<li>A word on OnlyFans</li>
<li>Heineken have a PSa</li>
</ul>
<p></p>
<p
class="text-18 text-shadow-800 m-0 leading-28 my-10 italic"
>
Phoebe Bain, Ryan Barwick, Minda Smiley
</p>
<div class="leading-16 sm:h-16"> </div>
<table
class="w-full mt-20"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td align="left" class="pb-48">
<span
class="
bg-brand-50
border-brand-50 border-solid
text-brand-500 text-12
rounded-8
"
style="
border-width: 2px 10px;
mso-border-width-alt: 6px;
mso-text-raise: 5px;
"
>Brands</span
>
<h2 class="font-normal mb-16 mt-0">
<a
href="https://example.com?utm_campaign=Email_Verification&utm_source=email"
class="
text-shadow-800 text-28
leading-30
hover:underline hover:text-brand-500
align-middle
"
>Hot dogs, the underdog of plant-based meat</a
>
</h2>
<a
href="https://example.com?utm_campaign=Email_Verification&utm_source=email"
>
<img
src="https://ci6.googleusercontent.com/proxy/PKMTSrvwN0TOhYr3RxbxoYxgu9XZQqry0lG_S_1ngLxwsvR65kyY6ic7tQsYBziq5D9jTU5chLxEUuQ_MKJBnZ6euOpBwkcZwryWTysrZ5vOrYNlnIl8PXNILXVkE5KIw06vYxntDROMzCZ1rRLuVP9FA65k4IEUEqFP7MD4yBHSFrVDCntrEhACjx12UTjboQVMogpTJZ41qCSbXtr3nDCDirvNtwMsOoD3NYjipAHBwgQOHL6U81nvNjcMHB-bxbszQpedTXBoqCVh17nsam5CCLUhGD_6YA9cesvWfu7LD7F43kIj5Br3zr2m=s0-d-e1-ft#https://dlp31coh2a67q.cloudfront.net/eyJrZXkiOiJ1cGxvYWRzL21lZGl1bS9hc3NldC81Mjc2L3BsYW50LWJhc2VkX2hvdF9kb2cuanBnIiwiYnVja2V0Ijoib3Nsby1wcm9kdWN0aW9uIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOm51bGx9fX0="
width="560"
alt="iPad Pro"
/>
</a>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
This weekend officially marks the start of Hot Dog
Season—or its other name, summer.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
In 2019, Americans bought a whopping 271 million
pounds of hot dogs between mid-May and mid-August,
according to 210 Analytics. That’s a lot of dogs. This
grilling season, many people will opt for a meat-free
dog, as plant-based alternatives have become more and
more ubiquitous.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
But the hot dog is the underdog of the veggie
category, as neither Beyond Meat nor Impossible Foods
makes a frank. That could change soon, though. Several
brands, including Nathan’s Famous and Nestlé’s Sweet
Earth, have rolled out their first attempts at
plant-based dogs ahead of summer.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>Hot vax dog summer </strong>
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
Hot dog sales still pale in comparison to ground
beef—try ordering a hot dog at McDonald’s.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
“Beyond and Impossible have a goal of really reducing
meat consumption, so they're going to go first for the
things that people eat the most of,” Karen Formanski,
an analyst who researches the plant-based food
category for marketing research firm Mintel, told
Marketing Brew.
</p>
</td>
</tr>
</table>
<table
class="w-full"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td align="left" class="pb-48">
<span
class="
bg-brand-50
border-brand-50 border-solid
text-brand-500 text-12
rounded-8
"
style="
border-width: 2px 10px;
mso-border-width-alt: 6px;
mso-text-raise: 5px;
"
>Campaigns</span
>
<h2 class="font-normal mb-16 mt-0">
<a
href="https://example.com?utm_campaign=Email_Verification&utm_source=email"
class="
text-shadow-800 text-28
leading-30
hover:underline hover:text-brand-500
align-middle
"
>OnlyFans isn’t only sex</a
>
</h2>
<a
href="https://example.com?utm_campaign=Email_Verification&utm_source=email"
>
<img
src="https://ci5.googleusercontent.com/proxy/74277-KFEHLdu-snz8XKNeoVcqfJ8SDhAqikZ9dEUA8X4DHI_jGc4Dnzn2Xmrmh0SuN5FLP2UipjKO-yEVhOC4424fO2DgWXklWWnS61TBE5vYHc2QVc0LoUaZQnjHfqbS3979EmwvqjNxnhiSiVTUfrmhBxK7UOx5Bo7tuDQgmqBsMuwTuut100J9Y5-BmWoKXankjXkmyWyY9olvtQIOBvCAZTkE-CsKsncuzJUOMVS_gLzgWlpQTXT3E8lYy7WLcIjAej4z7XD-n4CxnK6ePRZoWr6H8p_gnk7f4xTaDH7w16mTfSCDM=s0-d-e1-ft#https://dlp31coh2a67q.cloudfront.net/eyJrZXkiOiJ1cGxvYWRzL21lZGl1bS9hc3NldC81MjczL2Nhcmxfc19qcl9jaGlja2VuLmpwZyIsImJ1Y2tldCI6Im9zbG8tcHJvZHVjdGlvbiIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6MTAwMCwiaGVpZ2h0IjpudWxsfX19"
width="560"
alt="iPhone XR"
/>
</a>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
After hearing about Carl’s Jr. and Hardee’s new
OnlyFans campaign, we couldn’t help but
wonder...what’s the right way to advertise on a
platform known as a porn site?
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>ICYMI:</strong> The burger chains are
promoting their new chicken sandwiches via an OnlyFans
channel called “Hot and Hand-Breaded.” The content
plays on OnlyFan’s NSFW reputation with “suggestive
videos,” like one that shows “disembodied hands
caressing hamburger buns,” per Adweek.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong> It wouldn’t be the first time:</strong>
Remember condiment company Fly By Jing’s “hot noods”
promotion? (More on that later.)
</p>
<p class="text-28 text-shadow-800 m-0 leading-28 my-20">
But not everyone’s convinced sex-related branded
content is right for OnlyFans.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
“I think it's a bad idea for two reasons,” Kinsey
Grant, who recently researched the porn industry (and
OnlyFans specifically) for her podcast and newsletter
Thinking Is Cool, told Marketing Brew.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
<strong>Number one:</strong> Grant told us OnlyFans
wants to position itself as “the kind of company that
is for anybody, not just for explicit content. They
don't want to be the place you go for porn.” She added
that the platform makes pornographic content
intentionally difficult to locate for this exact
reason.
</p>
</td>
</tr>
</table>
<table
class="w-full"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td align="left">
<span
class="
bg-brand-50
border-brand-50 border-solid
text-brand-500 text-12
rounded-8
"
style="
border-width: 2px 10px;
mso-border-width-alt: 6px;
mso-text-raise: 5px;
"
>Sponsored by Stackadapt</span
>
<h2 class="font-normal mb-16 mt-0">
<a
href="https://example.com?utm_campaign=Email_Verification&utm_source=email"
class="
text-shadow-800 text-28
leading-30
hover:underline hover:text-brand-500
align-middle
"
>Get with the Program(matic)</a
>
</h2>
<a
href="https://example.com?utm_campaign=Email_Verification&utm_source=email"
>
<img
src="https://ci5.googleusercontent.com/proxy/O7J6mSLt-ee583BFdQlggZWAhS0_HtGbg9--IwnDg5RnNKdl6_cvwFT71xhzZhBc-PvrIpksYEVLkEZICfJKRiFvSkYjGI6dzXW7viTVZNhjzEzm54UMv11J4wlNmiogzWvmKI_bXk0m8TrjVNMV3ThtVK1QWupduJNIlyQSmuvEiUBz1j1fHyFfCNhc7XLYwMRsAUxRA8H-XxgixUfLm-AtaEPWZsRhX6-JZGulUxfFdv09k4rGujqgpq9YmJWJ6Z3JvSB06DCsJErorB5ZM4_wthYeByIZJ46rVCgGva08gZQLqXkXhGtr5hD5yFd1dhAcLa8OjWaplD8W0SHsnDYkTBbxdU0yWgQZkEGJ7es6Ugoae6QkK114KvC8twSWbCreCR8=s0-d-e1-ft#https://dlp31coh2a67q.cloudfront.net/eyJrZXkiOiJ1cGxvYWRzL3BsYWNlbWVudC9pbWFnZXMvMjA2NC8xNjIwNDE1NzEzLUJ1c2luZXNzLUNhc2UtZm9yLVByb2dyYW1tYXRpYy1MYW5kaW5nLVBhZ2UucG5nIiwiYnVja2V0IjoiY29tZXQtbW9ybmluZ2JyZXciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjEwMDAsImhlaWdodCI6bnVsbH19fQ=="
width="560"
alt="iMac"
/>
</a>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
Programmatic advertising has a lot to offer. As
StackAdapt explains in this business case,
programmatic solves the problem of where to buy media
and
<strong
>lets buyers focus entirely on quality, performance,
and return on spend</strong
>.
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
You may have heard something about minimum spends. But
what if we told you that not all programmatic
platforms require them?
</p>
<p class="text-18 text-shadow-800 m-0 leading-28 my-10">
You’d be like, get outta here. But it’s true—and
that’s the kind of insight you’ll get in StackAdapt’s
business case. You’ll also learn about the many
benefits of programmatic ads, including:
</p>
</td>
</tr>
</table>
<div class="text-left bg-gray-100 p-20 rounded-md mt-20">
<table
class="w-full"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tr>
<td>
<p
class="text-gray-500 text-md leading-16 mb-16 mt-0"
>
Written by Linda Hamilton, Sarrah Connar, and Ryan
Barwick
</p>
<p
class="text-gray-500 text-md leading-16 mb-16 mt-0"
>
Was this email forwarded to you? Sign up here.
</p>
<p
class="
text-gray-700
font-bold
text-xl
leading-22
mb-10
"
>
Want More Brew ♥?
</p>
<p class="text-gray-700 text-16 leading-22 mb-10">
Business Newsletter → Morning Brew
</p>
<p class="text-gray-700 text-16 leading-22 mb-10">
Retail Newsletter → Retail Brew
</p>
<p class="text-gray-700 text-16 leading-22 mb-10">
Tech Newsletter → Emerging Tech Brew
</p>
<p class="text-gray-700 text-16 leading-22 m-0">
Recommendations newsletter → Sidekick
</p>
<div class="leading-28 sm:h-28"> </div>
<p
class="text-gray-500 text-12 leading-16 mb-16 mt-0"
>
This email was sent to you as a registered member of
<a
href="http://www.example.com?utm_campaign=Email_Verification&utm_source=email"
class="
hover:text-pacific-700 hover:underline
inline-block
"
>example.com</a
>. Questions or concerns? Get in touch with us at
<a
href="mailto:support@example.com?utm_campaign=Email_Verification&utm_source=email"
class="
hover:text-pacific-700 hover:underline
inline-block
"
>support@example.com</a
>.
<span class="sm:block sm:mt-16"
>Use of the service and website is subject to our
<a
href="https://www.example.com/terms?utm_campaign=Email_Verification&utm_source=email"
class="
hover:text-pacific-700 hover:underline
inline-block
"
>Terms of Use</a
>
and
<a
href="https://www.example.com/privacy?utm_campaign=Email_Verification&utm_source=email"
class="
hover:text-pacific-700 hover:underline
inline-block
"
>Privacy Statement</a
>.</span
>
Follow us on
<a
href="https://www.instagram.com/example/?utm_campaign=Email_Verification&utm_source=email"
class="
hover:text-pacific-700 hover:underline
inline-block
"
>Instagram</a
>,
<a
href="https://twitter.com/example?utm_campaign=Email_Verification&utm_source=email"
class="
hover:text-pacific-700 hover:underline
inline-block
"
>Twitter</a
>, and
<a
href="https://www.facebook.com/example?utm_campaign=Email_Verification&utm_source=email"
class="
hover:text-pacific-700 hover:underline
inline-block
"
>Facebook</a
>.
</p>
<p class="text-gray-500 text-12 leading-16 m-0">
© 2021 example.com. All rights reserved.
</p>
<p class="text-gray-500 text-12 leading-16 m-0">
1217 Old Coochs Bridge Rd - Newark, Delaware, 19713
USA
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
`
Here is my tailwind.config.js document below:
`const { map, fromPairs } = require("lodash");
const plugin = require("tailwindcss/plugin");
const nameClass =
require("./node_modules/tailwindcss/lib/util/nameClass").default;
module.exports = {
mode: "jit",
purge: ["src/**/*.*"],
purgeCSS: { keyframes: true, fontFace: true, removeHTMLComments: true },
removeUnusedCSS: true,
inlineCSS: true,
replaceStrings: {},
removeAttributes: [],
safeClassNames: {},
sixHex: true,
prettify: true,
minify: {
lineLengthLimit: 500,
removeIndentations: true,
breakToTheLeftOf: [],
},
baseImageURL:
"https://res.cloudinary.com/db9qyy1nu/image/upload/v1622498585/Emails/",
theme: {
screens: {
sm: { max: "640px" },
},
extend: {
colors: {
gray: {
50: "#FCFDFD",
100: "#F1F3F5",
200: "#D1D6DE",
300: "#A8B1C0",
400: "#96A2B3",
500: "#8492A6",
600: "#728299",
700: "#637389",
800: "#576478",
900: "#4A5566",
},
brand: {
50: "#ECF3FF",
100: "#A0C2FF",
200: "#689FFF",
300: "#2071FF",
400: "#025EFF",
500: "#0052E2",
600: "#0047C3",
700: "#003CA5",
800: "#003186",
900: "#002668",
},
purple: {
50: "#f8f8fb",
100: "#f4f0fa",
200: "#e7d7f7",
300: "#dbb8f5",
400: "#cf87f2",
500: "#bf59ee",
600: "#9d39e2",
700: "#722dc2",
800: "#522591",
900: "#360060",
},
shadow: {
50: "#fafafa",
100: "#f8f7f4",
200: "#eee9e4",
300: "#e3d3ce",
400: "#cfaaa5",
500: "#b38175",
600: "#8a5b4f",
700: "#624540",
800: "#423f3f",
900: "#342a2b",
},
pacific: {
50: "#eff9fa",
100: "#d7f7f7",
200: "#a9efee",
300: "#6fe3e6",
400: "#2acdd9",
500: "#0eafc6",
600: "#0c90ab",
700: "#147b89",
800: "#135967",
900: "#114851",
},
blue: {
50: "#EEF8FD",
100: "#A8DDF7",
200: "#74C9F2",
300: "#33AFEC",
400: "#17A4EA",
500: "#1391CF",
600: "#107DB3",
700: "#0E6A97",
800: "#0B567B",
900: "#09425F",
},
},
spacing: {
px: "1px",
full: "100%",
screen: "100vw",
0: "0",
2: "2px",
3: "3px",
4: "4px",
5: "5px",
6: "6px",
7: "7px",
8: "8px",
9: "9px",
10: "10px",
11: "11px",
12: "12px",
14: "14px",
16: "16px",
18: "18px",
20: "20px",
22: "22px",
24: "24px",
28: "28px",
30: "30px",
32: "32px",
36: "36px",
40: "40px",
48: "48px",
56: "56px",
60: "60px",
64: "64px",
72: "72px",
88: "88px",
92: "92px",
96: "96px",
100: "100px",
118: "118px",
120: "120px",
136: "136px",
146: "146px",
176: "176px",
200: "200px",
272: "272px",
289: "289px",
336: "336px",
400: "400px",
488: "488px",
416: "416px",
600: "600px",
640: "640px",
680: "680px",
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"1/12": "8.333333%",
"2/12": "16.666667%",
"3/12": "25%",
"4/12": "33.333333%",
"5/12": "41.666667%",
"6/12": "50%",
"7/12": "58.333333%",
"8/12": "66.666667%",
"9/12": "75%",
"10/12": "83.333333%",
"11/12": "91.666667%",
},
borderRadius: {
sm: "2px",
DEFAULT: "4px",
lg: "8px",
},
boxShadow: {
DEFAULT:
"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
},
fontFamily: {
Poppins: [
'"Poppins"',
"ui-sans-serif",
"system-ui",
"-apple-system",
'"Segoe UI"',
"sans-serif",
],
},
fontSize: {
0: "0",
9: "9px",
12: "12px",
14: "14px",
16: "16px",
21: "21px",
28: "28px",
38: "38px",
50: "50px",
},
letterSpacing: {
tighter: "-2px",
tight: "-1px",
normal: "0",
wide: "1px",
wider: "2px",
widest: "4px",
},
inset: (theme) => ({
...theme("spacing"),
}),
letterSpacing: (theme) => ({
...theme("spacing"),
}),
lineHeight: (theme) => ({
...theme("spacing"),
}),
maxHeight: (theme) => ({
...theme("spacing"),
}),
maxWidth: (theme) => ({
...theme("spacing"),
}),
minHeight: (theme) => ({
...theme("spacing"),
}),
minWidth: (theme) => ({
...theme("spacing"),
}),
},
},
corePlugins: {
animation: false,
backgroundOpacity: false,
borderOpacity: false,
boxShadow: false,
divideOpacity: false,
placeholderOpacity: false,
ringColor: false,
ringWidth: false,
ringOpacity: false,
ringOffsetColor: false,
textOpacity: false,
},
plugins: [
/**
* Custom boxShadow plugin that does not use CSS variables
* (which are poorly supported in email)
*/
plugin(function ({ addUtilities, theme, variants }) {
const utilities = fromPairs(
map(theme("boxShadow"), (value, modifier) => {
return [
nameClass("shadow", modifier),
{
"box-shadow": value,
},
];
})
);
addUtilities(utilities, variants("boxShadow"));
}),
],
};You're using the development build, you need to build your email for production.
Read the docs: https://maizzle.com/docs/environments/#production
vlknhslk
commented
3 years ago My problem seems to be solved. It was blocked by the Typekit font. Now that I've changed to Google Font, I'm ready to go. I want to thank you again, Cosmin
cossssmin
commented
3 years ago You're welcome, closing this as resolved then đź‘Ť
The test email works beautifully in Apple Mail, Outlook, and Spark. It appears to be plain text in Gmail. Why might there be an issue?