<ul class="comments">
   <li>
    <span class='date'>20. September 2013, 15:18 Uhr</span>
    
    <div class='user'>
      <img src='https://goo.gl/IwvOIY'>
      <span class="name">User356</sapn>
    </div>
    
    <span class='text'> 
        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. A small river named Duden flows by their place and supplies it with the necessary regelialia.
    </span>
 </li>
  
   <li>
    <span class='date'>20. September 2013, 15:18 Uhr</span>
    
    <div class='user'>
      <img src='https://goo.gl/IwvOIY'>
      <span class="name">User356</sapn>
    </div>
    
    <span class='text'> 
        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
    </span>
 </li>
  
   <li>
    <span class='date'>20. September 2013, 15:18 Uhr</span>
    
    <div class='user'>
      <img src='https://goo.gl/IwvOIY'>
      <span class="name">User356</sapn>
    </div>
    
    <span class='text'> 
        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
    </span>
 </li>
  
</ul>
html {
  background: #fff url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png');
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  max-width: 480px;
  width: 100%;
  margin: 30px auto 0 auto;
}

.comments:after { border-color: #fff; }
.comments:before { background-color: #fff; }
.comments li{
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  padding: 10px 15px;
}
.comments .name ,.comments .date{
   color: #ccc;
    margin-bottom: 5px;
}

.comments .date{
  position: absolute;
  left: 210px; 
}

.comments .text { color: #888; }


.comments {
  list-style-type: none;
  padding: 5px 0 0 46px;
  position: relative;
  margin: 0 0 0 12px;
}
.comments:before,
.comments li,
.comments li:after,
.comments li:before,
.comments .user img,{
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.comments:after,
.comments:before {
  display: block;
  content: '';
  position: absolute;
}
.comments:before {
  border-radius: 0 0 5px 5px;
  height: 100%;
  width: 8px;
  left: 0;
  top: 0;
}
.comments:after {
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) inset;
  border-width: 4px;
  border-style: solid;
  border-radius: 18px;
  height: 10px;
  width: 10px;
  left: -5px;
  top: -16px;
  z-index: -1;
}
.comments li{
  margin-bottom: 10px;
  position: relative;
}
.comments li:after,
.comments li:before {
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  display: block;
  content: '';
}
.comments li:after {
  width: 12px;
  height: 12px;
  left: -14px;
  top: 7px;
}
.comments li:before {
  width: 5px;
  height: 5px;
  left: -22px;
  top: 16px;
}
.comments .user img {
  position: absolute;
  left: -80px;
  top: 7px;
  border-radius: 32px;
  overflow: hidden;
  width:50px;
  height:50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.