JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="transactional">
  <div class="transactional__header">
    <img class="transactional__header__logo" src="https://dy3qdh25h6cq.cloudfront.net/20160725120304/css/themes/continu/assets/images/[email protected]" alt="">
  </div>
  
  <div class="transactional__header">
    <table>
      <tbody>
        <tr>
          <td>LOGO</td>
          <td>SAl</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="transactional__greeting">
    Hola, *|FNAME|*,
  </div>

  <div class="transactional__message">
    *|MESSAGE|*
  </div>

  <div class="transactional__content">
    *|CONTENTLINKLIST|*
  </div>

  <a href="" class="transactional__button">Button Text</a>

  <div class="transactional__footer">
    *|FOOTERMSG|* <a href="*|FOOTERLINK|*">*|FOOTERLINKTEXT|* </a>
  </div>

</div>

SCSS

/* main colors */
$lightgrey: #f2f2f2 !global;
$grey: grey !global;
$white: white;
$emailbackground: $white;

/* brands */
$cba-brandcolor: #a2412c;
$continu-brandcolor: #00bcf2;
$createone-brandcolor: #ED2F48;
$dcs-brandcolor: #eb6724;
$eventbrite-brandcolor: #39C2C9;
$nitro-brandcolor: #ee5b21;
$uber-brandcolor: #76B73D;
$yelp-brandcolor: #c41200;
/* set brand */
$brandcolor: $continu-brandcolor;

/* Dimensions */

$breakwidth: 600px;
$maxwidth: 600px;
$rem: 16px;

/* Layout */
* {
  /* border: 1px solid rgb(255, 0, 0) */
}

body {
  font-size: 16px;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.transactional {
  margin: 0;
  padding-top: $rem;
  padding-right: $rem;
  padding-bottom: $rem;
  padding-left: $rem;
  background: $emailbackground;
  color: rgb(80, 80, 80);
  line-height: 1.5;

  &__header,
  &__greeting,
  &__message,
  &__content,
  &__button,
  &__footer {
    max-width: $maxwidth;
    margin: 0 auto 0;
  }

  &__header {
    /* text-align: center; */
    margin-bottom: $rem;
    &__logo {
      display: inline-block;
      height: 50px;
      margin-top:($rem * 2.5);
      margin-bottom: ($rem * 2.5);
    }
  }

  &__greeting {
    text-align: center;
    margin-bottom: $rem;
  }

  &__message {

    margin-bottom: $rem;
  }

  &__content {
    margin-bottom: $rem;
  }

  &__button {
    background: $brandcolor;
    display:block;
    margin: $rem auto 0;
    padding: 10px;
    text-align: center;
    color: $white;
    text-decoration: none;
    border-radius: 3px;
    font-size: ($rem * 1.05);
  }

  &__footer {
    font-size: 12px;
    text-align: center;
    margin-top: ($rem * 3);
    margin-bottom: $rem;
  }
}