<div class="top-buffer"></div>
<div class="container-fluid">
  <div class="row row-centered">
    <div class="col-xs-2 col-md-2"></div>
    <div class="col-xs-8 col-md-8 col-centered">
      <h1 class="text-center font-consistent">Company Name</h1>
<address class="text-center font-consistent">
  1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
      </address>
      <div class="top-buffer"></div>
      <svg class="fb-emotes-svg" style="display: none;">
        <symbol id="fb-emote-terrible" data-emote="terrible" viewBox="0 0 100 100">
          <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10"/>
          <path class="fb-emote__eye fb-emote__eye--right" d="M58,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10"/>
          <path class="fb-emote__smile" d="M30,68 q20,-13 40,0 M30,68 q20,-13 40,0"/>
        </symbol>
        <symbol id="fb-emote-bad" data-emote="bad" viewBox="0 0 100 100">
          <path class="fb-emote__eye fb-emote__eye--left" d="M22,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10"/>
          <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10"/>
          <path class="fb-emote__smile" d="M30,68 q20,-10 40,0 M30,68 q20,-10 40,0"/>
        </symbol>
        <symbol id="fb-emote-okay" viewBox="0 0 100 100">
          <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-emote__smile" d="M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8"/>
        </symbol>
        <symbol id="fb-emote-good" viewBox="0 0 100 100">
          <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-emote__smile" d="M30,68 q20,10 40,0 M30,68 q20,10 40,0"/>
        </symbol>
        <symbol id="fb-emote-great" viewBox="0 0 100 100">
          <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-emote__smile" d="M30,68 q20,15 40,0 M30,68 q20,0 40,0"/>
        </symbol>
      </svg>
<h2 class="text-center font-consistent">How was the help you received?<h2>
      <div class="fb-cont">
      
        <div class="fb-cont__inner">
          <div class="fb-emote" data-emote="terrible">
            <svg><use xlink:href="#fb-emote-terrible"/></svg>
            <p class="fb-emote__caption">Terrible</p>
          </div>
          <div class="fb-emote" data-emote="bad">
            <svg><use xlink:href="#fb-emote-bad"/></svg>
            <p class="fb-emote__caption">Bad</p>
          </div>
          <div class="fb-emote s--active" data-emote="okay">
            <svg><use xlink:href="#fb-emote-okay"/></svg>
            <p class="fb-emote__caption">Okay</p>
          </div>
          <div class="fb-emote" data-emote="good">
            <svg><use xlink:href="#fb-emote-good"/></svg>
            <p class="fb-emote__caption">Good</p>
          </div>
          <div class="fb-emote" data-emote="great">
            <svg><use xlink:href="#fb-emote-great"/></svg>
            <p class="fb-emote__caption">Great</p>
          </div>
          <div class="fb-cont__drag-cont">
            <div class="fb-active-emote">
              <svg viewBox="0 0 100 100">
                <path class="fb-active-emote__eye fb-active-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
                <path class="fb-active-emote__eye fb-active-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
                <path class="fb-active-emote__smile" d="M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
  <div class="input-group">
    <textarea class="form-control custom-control" rows="3" cols="120" style="resize:none" placeholder="Review1"></textarea></div>
  <div class="top-buffer"></div>
  <div class="input-group">
    <textarea class="form-control custom-control" rows="3" cols="120" style="resize:none" placeholder="Review2"></textarea>     
</div>
    <div class="top-buffer"></div>
  <button type="button" class="btn btn-primary btn-lg text-center ">Submit</button>
    </div>
    <div class="col-xs-2 col-md-2 col-centered"></div>
    

  </div>
</div>
.top-buffer{
  margin-top:40px;
}
.font-consistent {color:#737b7b;font-family: Helvetica, Arial, sans-serif;}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  // background: #323232;
  font-family: Helvetica, Arial, sans-serif;
}

$darkColor: #c8ced3;
$activeDarkColor: #655e53;
$activeYellowColor: #ffd68c;

$contW: 800px;
$contPad: 75px;
@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 30px;
  }
  $contW: 200px;
$contPad: 25px;
}
$smileSize: 76px;
$activeSmileSize: 110px;

$dragContW: $contW - $contPad*2 - $smileSize;

$animTime: 0.5s;

.fb {

  &-cont {
    overflow: hidden;
    position: relative;
    margin:  auto;
    width: $contW;
    padding: $contPad;
    padding-bottom: $contPad + 65px;
    background: #fff;
    
    &__inner {
      position: relative;
      display: flex;
      justify-content: space-between;
      
      &:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 90%;
        height: 4px;
        margin-top: -2px;
        background: rgba($darkColor, 0.5);
        border-radius: 2px;
        transform: translateX(-50%);
      }
    }
    
    &__drag-cont {
      z-index: 2;
      position: absolute;
      left: 50%;
      top: 0;
      width: $dragContW;
      height: 100%;
      margin-left: $dragContW/-2;
      pointer-events: none;
      transform: translate3d(50%,0,0);
    }
  }
  
  &-emote {
    z-index: 1;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: $smileSize;
    height: $smileSize;
    cursor: pointer;
    
    svg {
      display: block;
      margin-bottom: 15px;
      width: 100%;
      height: 100%;
      background: $darkColor;
      border-radius: 50%;
      transition: transform $animTime;
    }
    
    &.s--active svg {
      transform: scale(0.7);
    }
    
    &__caption {
      text-align: center;
      font-size: 26px;
      font-weight: 700;
      color: $darkColor;
      transition: all $animTime;
      
      .fb-emote.s--active & {
        color: $activeDarkColor;
        transform: translateY(15px);
      }
    }
    
    &__eye {
      stroke: none;
      fill: #fff;
    }
    
    &__smile {
      stroke: #fff;
      stroke-width: 10;
      stroke-linecap: round;
      fill: none;
    }
  }
  
  &-active-emote {
    position: absolute;
    left: 0;
    top: 50%;
    width: $activeSmileSize;
    height: $activeSmileSize;
    margin-left: $activeSmileSize/-2;
    margin-top: $activeSmileSize/-2;
    background: $activeYellowColor;
    border-radius: 50%;
    
    svg {
      width: 100%;
      height: 100%;
    }
    
    &__eye {
      stroke: none;
      fill: $activeDarkColor;
    }
    
    &__smile {
      stroke: $activeDarkColor;
      stroke-width: 10;
      stroke-linecap: round;
      fill: none;
    }
  }
}

.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 32px;

  img {
    width: 100%;
    vertical-align: top;
  }

}
View Compiled
function $$(selector, context) {
  var context = context || document;
  var elements = context.querySelectorAll(selector);
  var nodesArr = [].slice.call(elements);
  return nodesArr.length === 1 ? nodesArr[0] : nodesArr;
};

var $emotesArr = $$('.fb-emote');
var numOfEmotes = $emotesArr.length;

var $dragCont = $$('.fb-cont__drag-cont');
var $activeEmote = $$('.fb-active-emote');
var $leftEye = $$('.fb-active-emote__eye--left');
var $rightEye = $$('.fb-active-emote__eye--right');
var $smile = $$('.fb-active-emote__smile');

var emoteColors = {
  terrible: '#f8b696',
  bad: '#f9c686',
  default: '#ffd68c'
}

var animTime = 0.5;

$emotesArr.forEach(function($emote, i) {
  var progressStep = i / (numOfEmotes - 1);
  $emote.dataset.progress = progressStep;
  
  $emote.addEventListener('click', function() {
    var progressTo = +this.dataset.progress;
    var type = this.dataset.emote;
    var $target = document.querySelector('#fb-emote-' + type);
    var $lEye = $target.querySelector('.fb-emote__eye--left');
    var $rEye = $target.querySelector('.fb-emote__eye--right');
    var leftEyeTargetD = $lEye.getAttribute('d');
    var rightEyeTargetD = $rEye.getAttribute('d');
    var smileTargetD = $target.querySelector('.fb-emote__smile').getAttribute('d');
    var bgColor = emoteColors[type];
    if (!bgColor) bgColor = emoteColors.default;
    
    $$('.fb-emote.s--active').classList.remove('s--active');
    this.classList.add('s--active');
    
    TweenMax.to($activeEmote, animTime, {backgroundColor: bgColor});
    TweenMax.to($dragCont, animTime, {x: progressTo * 100 + '%'});
    TweenMax.to($leftEye, animTime, {morphSVG: $lEye});
    TweenMax.to($rightEye, animTime, {morphSVG: $rEye});
    TweenMax.to($smile, animTime, {attr: {d: smileTargetD}});
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js