JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

</head>
<body>

<table class="body-wrap">
    <tr>
        <td class="container">

            <!-- Message start -->
            <table class="content-wrap">
              <tr>
                  <td class="head">
                      <img src="https://gallery.mailchimp.com/db40c343b16b0af0b777d7db4/images/abb8c73f-866d-4665-9f17-a229c1d6141e.png" alt="bonmedico" class="logo">
                  </td>
              </tr>

                <tr>
                    <td class="content">
                      <b>Liebe/r {{name}}</b>
                      <p>vielen Dank für Ihre Teilnahme an der Verlosung.</p>
                      <p>Wir werden Sie am xx.xx.xxxx über den Gewinner informieren.</p>
                      <p>Möchten Sie Ihre Chance auf den Gewinn erhöhen? Und zur gleichen Zeit Ihren Liebsten eine Freude machen?</p>
                      <p>Teilen Sie diesen Link einfach mit Ihrer Familie, Ihren Freunden, Kollegen und Bekannten und verschenken Sie einen 20 % Rabatt-Code auf deren nächsten bonmedico Einkauf.</p>
                      <p>Pro Newsletter Anmeldung, die wir über Ihre Kontakte erhalten, bekommen Sie xx zusätzliche Punkte. Je mehr Punkte Sie sammeln, desto höher Ihre Chance zu gewinnen.</p>



                      <div class="lottery_steps">

                      <div class="lottery_step">
                        <img src="https://bonmedico.de/wp-content/uploads/2019/02/step1_lottery.png">
                        <p>1. Link an Freunde versenden (max. x)</p>
                      </div>

                      <span class="lottery_arrow"><img class="lottery_arrow" src="https://bonmedico.de/wp-content/uploads/2019/02/arrow-copy_lottery.png"></span>

                      <div class="lottery_step">
                        <img src="https://bonmedico.de/wp-content/uploads/2019/02/step2_lottery.png">
                        <p>1. Link an Freunde versenden (max. x)</p>
                      </div>

                      <span...

CSS

* { margin: 0; padding: 0; font-size: 100%; font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1.65; }
    img { max-width: 100%; margin: 0 auto; display: block; float: left; }
    body, .body-wrap { width: 100% !important; height: 100%; background: #c8e0e2; }
    a { color: #71bc37; text-decoration: none; }
    a:hover { text-decoration: underline; }

    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-left { text-align: left; }
    .button { display: inline-block; color: white !important; background: #f66000; border: solid #f66000; border-width: 10px 20px 8px; font-weight: bold; border-radius: 4px; }
    .button:hover { text-decoration: none; }

    h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; line-height: 1.25; }
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    h4 { font-size: 20px; }
    h5 { font-size: 16px; }
    p, ul, ol { font-size: 16px; font-weight: normal; margin-bottom: 0px; margin-top: 10px; }

    .container { display: block !important; clear: both !important; margin: 0 auto !important; max-width: 600px !important; }
    .container table { width: 100% !important; border-collapse: collapse; }
    .container .masthead { padding: 80px 0; background: #7F5A7E; color: white; }
    .container .masthead h1 { margin: 0 auto !important; max-width: 90%; text-transform: uppercase; }
    .container .content, .contacts, .benfits, .unsubscribe{ background: white; padding: 30px 50px; }
    .container .content.footer { background: none; }
    .container .content.footer p { margin-bottom: 0; color: #888; text-align: center; font-size: 14px; }
    .container .content.footer a { color: #888; text-decoration: none; font-weight: bold; }
    .container .content.footer a:hover { text-decoration: underline; }
    .contacts-wrap, .benfits-wrap, .unsubscribe-wrap {margin-top:10px;}
    .content-wrap {margin-top: 50px;}
    .head { background:...