JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- <div class='review-cards__centered-container'>
  <div class='review-card'>
    <div class='review-card__header'>
      <div class='review-card__header__media'>
        <img src='https://s3.amazonaws.com/secretsaucefiles/photos/images/000/074/943/large/oreos1.JPG?1480966508' />
        <div style="position:relative;height:0;padding-bottom:56.27%"><iframe src="https://www.youtube.com/embed/kJfo7qxnMcw?ecver=2" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></div>
      </div>
      <div class='review-card__header__interactions'>
        <i class="fa fa-heart" aria-hidden="true"></i>
        <i class="fa fa-cutlery" aria-hidden="true"></i>
      </div>
    </div>
    
    <div class='review-card__info'>
      <div class='review-card__info__product'>
        <div class='review-card__info__name'>
          Oreos
        </div>
        <div class='review-card__info__brand'>
          nabisco
        </div>
      </div>
      <div class='review-card__info__ratings'>
         <div class='review-card__info__ratings__number'>
           (30)
         </div>
         <div class='review-card__info__ratings__stars'>
           <i class="fa fa-star" aria-hidden="true"></i>
           <i class="fa fa-star" aria-hidden="true"></i>
           <i class="fa fa-star" aria-hidden="true"></i>
           <i class="fa fa-star" aria-hidden="true"></i>
           <i class="fa fa-star" aria-hidden="true"></i>
         </div>
      </div>
    </div>
    <div class='review-card__review-text'>
      <div class='text-review'>
        <div class='text-review__reviewer'>
          <div class='text-review__reviewer__image'>
            <img src='http://web-images.chacha.com/images/Quiz/1407/are-you-eating-a-balanced-diet-aug-1-2012-1-600x566.jpg' />
          </div>
       ...

SCSS

$red: #ff005c;
$orange: #ff7600;
$green: #00d260;
body {
  background: white;
  margin: 0;
  font-family: 'Lato', sans-serif;
}

.card {
  background: white;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  margin: 15px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.color-card {
  @extend .card;
  width: 50px;
  height: 50px;
  margin: 5px;
}

.colored-cards__centered_container {
  text-align: center;
  padding: 100px 0;
}

.green-card {
  @extend .color-card;
  background-color: $green;
  border: 2px solid lighten($green, 10%);
}
.red-card {
  @extend .color-card;
  background-color: $red;
}
.orange-card {
  @extend .color-card;
  background-color: $orange;
}

.black-card {
  @extend.color-card;
  background-color: black;
}

@import url(https://fonts.googleapis.com/css?family=Baloo|Kaushan+Script);
.gradient-orange-red-card {
  @extend .color-card;
  background: linear-gradient($red, $orange);
}

.logo-image {
  display: inline-block;
  font-family: 'Baloo', cursive;
  font-size: 280px;
  margin-bottom: -140px;
  background-image: linear-gradient(to right, $red, $orange); /* Standard syntax; must be last */
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  // text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.logo-image__fill {
  background: linear-gradient(to right, $red, $orange);
  // background: $green;
  position: absolute;
  width: 140px;
  height: 76px;
  top: 204px;
  left: 16px;
}

.logo {
  font-size: 40px;
  padding: 10px 0;
  
  .foodi {
    font-weight: 400;
    margin-right: 10px;
    font-family: 'Kaushan Script', cursive; // 9
  }
  
  .bites {
    font-weight: 900;
    // color: #ff6000;
    background-image: linear-gradient(to right, $red, $orange); /* Standard syntax; must be last */
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-family: 'Baloo', cursive;
  }
}

.review-cards__centered-container {
  padding: 100px 0;
 ...