Reaction:

dabblet.css

body{
  font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
}

#wrapper{
  background: url("http://m-local.wavii.com:3000/assets/mobile/page_background@2x.jpg");
  height: 100%;
  width: 320px;
  padding: 20px;
} 
.avatar {
 width: 45px;
}
.avatar img{
  height: 26px;
  border: 2px solid #3F9BC2;
  margin: 13px 0px 0 10px;
}
.actions{
  width: 50px;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(23, 175, 232, 0.7)), color-stop(65%, rgba(16, 122, 162, 0.7)), color-stop(70%, rgba(16, 122, 162, 0.7)), color-stop(100%, rgba(46, 183, 234, 0.7)));
  background: -webkit-linear-gradient(top, rgba(23, 175, 232, 0.7), rgba(16, 122, 162, 0.7) 65%, rgba(16, 122, 162, 0.7) 70%, rgba(46, 183, 234, 0.7));
  -webkit-box-shadow: rgba(157, 221, 245, 0.5) 0px -1px 6px inset;
  text-align: center;
  color: white;
}
.actions span{
  position: absolute;
  right: 11px;
  top: 50%;
  margin-top: -17px;
  letter-spacing: -4px;
  font-size: 62px;
  line-height: 0;
}

.second-social-bar{
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 3px 4px;
  width: 319px;
  margin-bottom: 30px;
}
.second-social-bar > section:first-child {
  width: 319px;
  margin-left: -1px;
  position: relative;
  background-color: #FFFFFF;
  background: white;
  -webkit-box-shadow: inset -3px 4px 6px #C5C5C5;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(73%,#ffffff), color-stop(100%,#eff1f0));
  background: -webkit-linear-gradient(top,  #ffffff 73%,#eff1f0 100%);
  margin-right: -50px;
}

.second-social-bar > section:first-child {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  min-height: 66px;
}

.second-social-bar > section:first-child .headline-module {
  -webkit-box-flex: 1;
}

.second-social-bar > section:first-child .snippet-module {
  -webkit-box-ordinal-group: 20;
  width: 125px;
}
 .headline-module {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  position: relative;
  padding: 10px;
  overflow: hidden;

}
 .headline-module:before,
 .headline-module:after{
 font-family: HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
 font-style: italic;
 font-size: 100px;
 color: #8A8A8A;
 opacity: .1;
 position: absolute;
 line-height: 0px;
 
}
 .headline-module:before{
 content: "\201c";
 top: 30px;
 left: -10px;
 
}
 .headline-module:after{
 content: "\201d";
 bottom: 5px;
 right: 0px;
 height: 0px;
}


.headline-module .headline {
  -webkit-box-flex: 1;
  margin: -0.27em 0em -0.25em 0em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
}

.headline-module .headline:after {
  content: "\00A0";
  display: block;
}

 .headline-module .headline .message {
 display: block;
 max-height: 72px;
 overflow: hidden;
  color: #8A8A8A; 
 font-family: HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
 font-size: 15px;
 padding-top: 4px;
}
 .headline-module .headline .label {
  display: block;
  font-size: 13px;
  color: #9D9D9D;
  font-family: HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
}

 .headline-module .user {
  color: white;
  font-size: 15px;
}

 .headline-module .user .rumor {
  color: #205A79;
}


.comments{
  background-color: rgba(0,0,0,.5);
}

.comments ul{
  margin: 0px 0px 0px 55px;
  padding: 10px 0px 0px 0px;
  list-style: none;
}
.comments ul li {
  display: -webkit-box;
  padding-bottom: 15px;
  margin: 0 20px 10px 0;
}
.comments ul li .user{
  width: 40px;
}
.comments ul li .user-details{
  -webkit-box-flex: 1; 
}
.comments ul li:not(:last-child){
  border-bottom: 1px dashed rgba(255,255,255,.2);
}

.comments ul li .user img{
  height: 26px;
}

.comments ul li .user-details .name{
  font-size: 15px;
  color: #B0E9FF;
  margin-bottom: 3px;
}
.comments ul li .user-details .comment{
  color: #E4E4E4;
  font-size: 15px;
}
.comments .reply a{
  font-size: 15px;
  color: #B0E9FF;
  text-decoration: none;
  padding: 10px 0px 10px 10px;
  display: block;

}
.comments .reply{ 
  display: block;
  text-align: right;
  margin: -15px 20px 0px 55px;
  border-top: 1px dashed rgba(255,255,255,.2);
}



/* Reaction: */
.second-social-bar .reaction{
  display: -webkit-box;
  -webkit-box-align: center;
  margin-left: 10px;
  color: #8A8A8A;
}
.second-social-bar .reaction{
  font-size: 15px;
  -webkit-box-flex: 1;
}
.second-social-bar .reaction .user{
  display: inline-block;
}
.second-social-bar .reaction .name,
.second-social-bar .reaction .count{
  color: #205A79;
}

dabblet.html

<section id="wrapper">

  <section class="second-social-bar">
    <section>
      <section class="reaction">
        <div class="user">
          <div class="name"> Gina Baplask </div>
        </div>
        and
        <span class="count">1 other</span>
        feels differetly
      </section>
      <section class="actions"><span>...</span></section>
    </section>
  </section>

  <section class="second-social-bar">
    <section>
      <section class="avatar">
        <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
      </section>
      <section class="headline-module">
        <div class="user">
          <span class="rumor">Jonathan Stanton</span>
        </div>
        <div class="headline">
          <span class="message">There’s just a small change to the code to be done. I know exactly what to type and where. It takes 30 seconds to type.</span>
          <span class="label">2 people like this</span>
        </div>
      </section>
      <section class="actions"><span>...</span></section>
    </section>
  </section>

  <section class="second-social-bar">
    <section>
      <section class="avatar">
        <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
      </section>
      <section class="headline-module">
        <div class="user">
          <span class="rumor">Jonathan Stanton</span>
        </div>
        <div class="headline">
          <span class="message">There’s just a small change to the code to be done. I know exactly what to type and where. It takes 30 seconds to type.</span>
          <span class="label">2 people like this</span>
        </div>
      </section>
      <section class="actions"><span>...</span></section>
    </section>
  </section>


  <section class="second-social-bar">
    <section>
      <section class="avatar">
        <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
      </section>
      <section class="headline-module">
        <div class="headline">
          <span class="message">Some of the mystery has been taken out of it, but Google has officially taken the wraps off of the Nexus 7, its first reference-grade</span>
          <span class="label">10 people like this</span>
        </div>
      </section>
      <section class="actions"><span>...</span></section>
    </section>
  </section>





  <section class="second-social-bar">
    <section>
      <section class="avatar">
        <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
      </section>
      <section class="headline-module">
        <div class="user">
          <span class="rumor">Jonathan Stanton</span>
        </div>
        <div class="headline">
            <span class="message">I don't like this one bit</span>
          <span class="label">10 people like this</span>
        </div>
      </section>
      <section class="actions"><span>...</span></section>
    </section>
  </section>





  <section class="second-social-bar">
    <section>
      <section class="avatar">
        <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
      </section>
      <section class="headline-module">
        <div class="headline">
          <span class="message">Wow Super Cool</span>
          <span class="label">10 people like this</span>
        </div>
      </section>
      <section class="actions"><span>...</span></section>
    </section>
  </section>



  <section class="second-social-bar">
    <section>
      <section class="avatar">
        <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
      </section>
      <section class="headline-module">
        <div class="headline">
          <span class="message">Lorem Ipsum</span>
        </div>
      </section>
      <section class="actions"><span>...</span></section>
    </section>
    </section>
  <section>


<section>


<section class="second-social-bar">
  <section>
    <section class="avatar">
      <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
    </section>
    <section class="headline-module">
      <div class="user">
        <span class="rumor">Jonathan Stanton</span>
      </div>
      <div class="headline">
        <span class="message">There’s just a small change to the code to be done. I know exactly what to type and where. It takes 30 seconds to type.</span>
        <span class="label">2 people like this</span>
      </div>
    </section>
    <section class="actions"><span>...</span></section>
  </section>
  <section class="comments">
    <ul>
     <li>
       <div class="user">
         <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
       </div>
       <div class="user-details">
         <div class="name">
           Scarlet Johansson
         </div>
         <div class="comment">
           This makes a lot of sense. They're trying to scam clueless people, so they go with something obvious. If you fall for it you're the sucker they are looking for.
         </div>
       </div>
     </li>
     <li>
       <div class="user">
         <img src="http://m4.licdn.com/mpr/mpr/shrink_100_100/p/4/000/17a/181/25f02c8.jpg" />
       </div>
       <div class="user-details">
         <div class="name">
           Scarlet Johansson
         </div>
         <div class="comment">
           why?? it'd be weird not calling it ipad
         </div>
       </div>
     </li>
    </ul>
    <span class="reply">
      <a href="/">6 other replies</a>
    </span>
  </section>

</section>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}