JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="digest">

<div class="digest__header">
  <table>
    <tbody>
      <tr>
        <td class="digest__header__logo"><img src="https://dy3qdh25h6cq.cloudfront.net/20160725120304/css/themes/continu/assets/images/[email protected]" alt="" height="40"></td>
        <td class="digest__header__copy">Continu Email Digest</td>
      </tr>
    </tbody>
  </table>
</div>

  <div class="digest__list">
    <table class="digest__list__table">
      <tbody class="digest__list__table__body">
        <tr class="digest__list__table__body__row digest__list__table__body__row--title">
          <td colspan="3" class="digest__list__table__body__row__data">Title Here</td>
        </tr>


        <!--main row style-->
        <tr class="digest__list__table__body__row">
          <td colspan="3" class="digest__list__table__body__row__data">

            <table class="digest__list__item">
              <tbody>
                <tr>
                  <td class="digest__list__item__avatar">
                    <img src="http://loremflickr.com/40/40" alt="" style="margin-right: 10px;border-radius: 100px; width: 40px;" />
                  </td>
                  <td class="digest__list__item__name">Edgar Poe
                    <div class="digest__list__item__name__sub">2 min</div>
                  </td>
                  <td class="digest__list__item__type">
                    <div class="digest__list__item__type__tag">
                      Article</div>
                  </td>

                </tr>
                <tr>
                  <td class="digest__list__item__title" colspan="2">And Then Was The Sound Of Creaking Stairs and Footsteps...</td>
                  <td class="digest__list__item__image"> <img src="http://www.placehold.it/70x70" alt="" style="border-radius: 5px;" /></td>
                </tr>
                <tr>
                  <td colspan="2">
                    <div class="digest__list__item__content">
                      Lorem ipsum dolor sit amet,...

SCSS

$brand: continu;
$lightgrey: #f2f2f2 !global;
$grey: grey !global;
$white: white;

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

$color-master: $continu-brandcolor;

$breakwidth: 600px;
$maxwidth: 600px;

table {
  width: 100%;
}

tbody,
tr,
td, div {
  margin: 0;
  padding: 0;
}

.digest {

  background: $lightgrey;
  font-family:sans-serif;
  font-size: 16px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;

  &__header {

    padding-top: 30px;
    padding-bottom: 30px;
    max-width: $maxwidth;
    margin: 0 auto !important;

    &__logo,
    &__copy {

      width: 100%;
      display:inline-block;
      text-align:center;

    }

    &__logo {
      img {
        height: 40px;

      }
    }

  }

  &__list {

    margin: 16px auto;
    padding-left: 16px;
    padding-right: 16px;
    max-width: $maxwidth;
    background: $white;
    border-radius: 3px;

    &__table {

      &__body {

        &__row {

          border-bottom: 10px solid red !important;

          &--title {

            td {

              padding-top: 16px;
              padding-bottom: 16px;
              padding-left: 0;
              padding-right: 0;
              text-transform:uppercase;
              font-weight: 600;
              text-align:center;
              font-size: 14px;
            } }

          &__data {
            border-bottom: 2px solid $lightgrey;
          }

          &:last-child .digest__list__table__body__row__data{
            border: 0 !important;
          } } }

    }

    &__item {
      padding-top: 32px;
      padding-bottom: 32px;
      padding-left: 0;
      padding-right: 0;

      td {

        vertical-align:top;

      }

      &__avatar {

        width: 40px;

      }

      &__name {

        &__sub {

         ...