JSFiddle - React, Tailwind, and code Playground
by Craig Haywood
HTML
<div style="max-width: 590px; margin: auto; text-align: left;">
<p dir="ltr">
<br>
</p>
<div style="max-width: 590px; margin: auto; text-align: left;">Awesome news, {{name}}.</div>
<div style="max-width: 590px; margin: auto; text-align: left;"> </div>
<div style="max-width: 590px; margin: auto; text-align: left;">You just unlocked: {{reward_name}}</div>
<div style="max-width: 590px; margin: auto; text-align: left;"> </div>
<p><img class="fr-dib fr-draggable hoverZoomLink" src="https://s3.amazonaws.com/upviral/upviralleadimages%2F1682941084142-SummerVacationBanners.jpg" style="max-width: 590px; width: 100%; height: auto"></p>
<div style="max-width: 590px; margin: auto; text-align: left;"> </div>
<div style="max-width: 590px; margin: auto; text-align: left;">To view the reward go to and instructions how to claim it go to:</div>
<div style="max-width: 590px; margin: auto; text-align: left;">{{reward_url}} </div>
<div style="max-width: 590px; margin: auto; text-align: left;"> </div>
<div style="max-width: 590px; margin: auto; text-align: left;">Keep sharing your unique referral link with your friends to get more points. Your unique referral URL is: {{referral_url}}</div>
<div style="max-width: 590px; margin: auto; text-align: left;"> </div>
<div style="max-width: 590px; margin: auto; text-align: left;">You can also use the share buttons below to share your link on social media.</div>
<div style="max-width: 590px; margin: auto; text-align: left;"> </div>
<div style="max-width: 590px; margin: auto; text-align: left;">
<br>
</div>
<p>{{fb_button}}</p>
<p>{{tw_button}}</p>
<p>{{pinterest_button}}</p>
<p>{{linkedin_button}}</p>
<p>{{whatsapp_button}}</p>
<p>{{messenger_button}}</p>
<p>{{telegram_button}}</p>
<p> </p>
Thank you!
<p>Craig</p></div>