<section id="app" class="comments">
  <article>
    <img id="profile-photo" src="https://en.gravatar.com/userimage/18343163/3fd908393aedf6423ec12cacec9a1f50.jpg?size=200" />
    <h4><a href="#">chrisburton</a></h4>
    <time>5 months ago</time>
    <like></like>
    <p>Thank you for visiting all the way from New York. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also see that
      I wrote in a thank you introduction with your location.</p>
  </article>

  <article>
    <img id="profile-photo" src="https://d17oy1vhnax1f7.cloudfront.net/items/0W2c1j2B0S0v3X0Z4407/Screen%20Shot%202017-01-28%20at%201.01.44%20AM.png" />
    <h4><a href="#">AnnaWintour</a></h4>     <time>1 month ago</time>
    <like></like>
    <p>
      <span class="reply">@chrisburton</span> +1. Really interesting reply.
    </p>
  </article>

  <article>
    <img id="profile-photo" src="https://25.media.tumblr.com/avatar_c5eeb4b2e95b_128.png" />
    <h4><a href="#">wooster</a></h4>
    <time>2 weeks ago</time>
    <like></like>
    <p>Thank you for visiting all the way from an unknown location. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also
      see that I wrote in a thank you introduction with your location.</p>
  </article>

  <article>
    <img id="profile-photo" src="https://randomuser.me/api/portraits/men/32.jpg" />
    <h4><a href="#">randomuser3</a></h4> 
    <time>1 week ago</time>
    <like></like>
    <p>Thank you for visiting all the way from NYC. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also see that I wrote
      in a thank you introduction with your location.</p>
  </article>

  <article>
    <img id="profile-photo" src="https://randomuser.me/api/portraits/women/19.jpg" />
    <h4><a href="#">cathater_</a></h4>
    <time>3 days ago</time>
    <like></like>
    <p>Thank you for visiting all the way from New York, NY.</p>
  </article>

  <article>
    <img id="profile-photo" src="https://randomuser.me/api/portraits/men/58.jpg" />
    <h4><a href="#">edwardshair</a></h4>
    <time>5 minutes ago</time>
    <like></like>
    <p>Thank you for visiting all the way from San Francisco, CA. This is just a test to determine if the Twitter API is working as it should. You should see your profile image and your username at the very top that links to your account. You should also
      see that I wrote in a thank you introduction with your location.</p>
  </article>

</section>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i');

* {box-sizing: border-box;}
a, a:hover {transition: .25s color linear;}

img {filter: grayscale(100%);}

article time, article:hover time,
.icon-rocknroll, .like-count {
  transition: .25s opacity linear;
}

/*
 |---------------------------------
 |
 | Project Start
 |
 |---------------------------------
 */
$theme: #BFBFA8;
$dark: #444;
$medium: #545454;
$light: rgba(178, 179, 153, .125);

html {
  font-size: 16px;

  body {
    color: $dark;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65;
    margin: 50px 0;
    padding: 0 25px;
    .comments {
      max-width: 450px;
      margin: 50px auto;

      article {
        position: relative;
        border-bottom: solid 1px $light;
        margin: 0 auto 50px auto;
        &:last-child {
          border: none;
        }
        &:hover {
          time {
            opacity: 1;
          }
        }
        img {
          position: absolute;
          top: -10px;
          left: -75px;
          width: 50px;
          height: 50px;
          border-width: 0;
          border-radius: 100%;
        }
        
        h4 {
          display: inline-block;
          font-weight: 400;
          margin-bottom: 25px;

          a {
            color: #404040;
            text-transform: lowercase;
            text-decoration: none;

             &:hover {
               color: $theme;
            }
          }
        }
        time {
          color: $medium;
          margin-left: 1rem;
          text-transform: uppercase;
        }
        .icon-rocknroll {
          color: $medium;
          font-size: .85rem;
          
          &:hover {
            opacity: .5;
          }
        }
        time,
        .like-count, 
        .icon-rocknroll {
          font-size: .75rem;
          opacity: 0;
        }
        time, .like-count {
          font-weight: 300;
        }
        p {
          margin-bottom: 50px;

          .reply {
            color: $theme;
            cursor: pointer;
          }
        }
        .active {
          opacity: 1;
        }
      }
    }
  }
}

.like-data {
  float: right;
}

.icon-rocknroll {
  background: none;
  border: 0;
  outline: none;
  cursor: pointer;
  margin: 0 .125rem 0 0;
  padding: 0;
}

.comments article:hover .icon-rocknroll,
.comments article:hover .like-count {
  opacity: 1;
}


@media (max-width: 650px) {
  .comments {
    width: 100%;
    padding: 0 1rem;
    article {
      width: 90%;
      #profile-photo {
        position: relative;
        left: -1rem;
        display: inline-block;
        vertical-align: middle;
      }
      h4 {
        display: inline-block;
        vertical-align: middle;
        time {
          display: block;
          margin-left: 0 !important;
          opacity: .5 !important;
        }
      }
    }
  }
}
View Compiled
// Design:  Chris Burton
// URL:     chrisburton.me
// JS by: https://github.com/vitorarjol

Vue.component('like', {
    template: "<div class='like-data'><button class='icon-rocknroll' v-class='active: liked' v-on='click: toggleLike'>&hearts;</button><span class='like-count' v-class='active: liked'>{{ likesCount }}</span></div>",
    data: function() {
        return {
            liked: false,
            likesCount: 0
        }
    },
    methods: {
        toggleLike: function() {
            this.liked = !this.liked;
            this.liked ? this.likesCount++ : this.likesCount--;
        }
    }
});
new Vue({
    el: '#app',
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js