JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="email">
<table class="email__header">
  <tbody class="email__header__body">
    <tr class="email__header__body__row">
      <td style="display: block; width: 100%;
    text-align:center;" class="email__header__body__row__cell email__header__body__row__cell--logo"><img src="https://dy3qdh25h6cq.cloudfront.net/20160715203756/css/themes/continu/assets/images/[email protected]" alt="" style="margin-bottom: 1rem;max-height: 36px;"></td>
      <td style="display: block; width: 100%;
    " class="email__header__body__row__cell email__header__body__row__cell--copy"> <span style="font-weight: 200;">Continu's Email Digest</span></td>
    </tr>
  </tbody>
</table>


<!-- START newcontent-->
<table class="email__newcontent">
  <tbody class="email__newcontent__body">
    <tr class="email__newcontent__body__row">
      <td class="email__newcontent__body__row__cell">
        <div class="email__newcontent__body__row__cell__title">New Content</div>
      </td>
    </tr>
    <!--   start smal-image trending row -->
    <tr class="email__newcontent__body__row">
      <td class="email__newcontent__body__row__cell">

        <table class="email__newcontent__body__row__cell__content">
          <tbody class="email__newcontent__body__row__cell__content__body">
            <tr class="email__newcontent__body__row__cell__content__body__row">
              <td style="width: 40px">
                <img src="http://loremflickr.com/40/40" alt="" style="margin-right: 10px;border-radius: 100px; width: 40px;">
              </td>
              <td>
                Victor Fuentes
                <div style="color:grey;
                      
                       margin-bottom:10px;
                       font-weight: 300;">2 Min</div>
              </td>
              <td style="
             text-align:right;
             ">
               <div class="email__newcontent__body__row__cell__content__body__row__type" style="
             ">Track</div></td>
            </tr>
            <tr...

SCSS

$color-master: #00bcf2;
$lightgrey: #f2f2f2;
$grey: grey;

.email {
  background: #f2f2f2;
  font-family: sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0 1rem;
  max-width: 800px;
}

* {
  /* box-shadow: inset 0 0 1px red; */
  /* font-family: Tahoma, Verdana, Segoe, sans-serif; */
}

tbody,
tr,
td, div {
  margin: 0;
  padding: 0;
}
.email__header {
  display: block;
  padding: 2rem 0 0;
  &__body {
    display: block;
    &__row {
      display: block;
      &__cell {
        
      text-align:center;
      
        &__logo {
          
        }
      
        &--copy {
          color: $grey;
        }
      }
    }
  }
}
/* 
.email__newcontent {
  background: #fff;
  padding: 1rem;
  &__title {
    padding: 1rem 0;
    margin: 0;
    border-bottom: 3px solid grey;
    text-align: center;
    text-transform: uppercase;
  }
  &__body {
    display: block;
    border-bottom: 3px solid grey;
    padding: 0 0 2rem;
    &__row {
      width: 100%;
      display: block;
      &__body {
        width: 100%;
        &__row {
          padding-top: 1rem;
          padding-bottom: 1rem;
          display: table;
          width: 100%;
          td {
            vertical-align: top;
          }
        }
      }
    }
  }
}
 */
.email__trending, 
.email__newcontent, 
.email__engaged {
  width: 100%;
  margin: 2rem 0;
  padding: 1rem;
  background: white;
  
  &__body {
   
   padding: 2rem 0;
    
    &__row {
      
      &__cell {
        
           border-bottom: 3px solid $lightgrey;
              
        &__title {
         
          text-transform: uppercase;
          font-weight: 600;
          text-align: center;
          padding: 1rem 0;
          font-size: 14px;
        }
        
        &__content {
          
          width: 100%;
          margin: 2rem 0;
          
          &__body {
            
            &__row {
              vertical-align:top;
              
              &__type {
                
               ...