<div class="speech-wrapper">
  <div class="bubble">
    <div class="txt">
      <p class="name">Benni</p>
      <p class="message">Hey, check out this Pure CSS speech bubble...</p>
      <span class="timestamp">10:20 pm</span>
    </div>
    <div class="bubble-arrow"></div>
  </div>
  <!--  Speech Bubble alternative -->
  <div class="bubble alt">
    <div class="txt">
      <p class="name alt">+353 87 1234 567<span> ~ John</span></p>
      <p class="message">Nice... this will work great for my new project.</p>
      <span class="timestamp">10:22 pm</span>
    </div>
    <div class="bubble-arrow alt"></div>
  </div>
</div>

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: url('http://forums.crackberry.com/attachments/blackberry-10-wallpapers-f308/137432d1361639896t-z10-wallpaper-set-z10-music.jpg');
}
.speech-wrapper{
  padding: 30px 40px;
  .bubble{
    width: 240px;
    height: auto;
    display: block;
    background: #f5f5f5;
    border-radius: 4px;
    box-shadow: 2px 8px 5px #000;
    position: relative;
    margin: 0 0 25px;
    &.alt{
      margin: 0 0 0 60px;
    }
    .txt{
      padding: 8px 55px 8px 14px;
      .name{
        font-weight: 600;
        font-size: 12px;
        margin: 0 0 4px;
        color: #3498db;
        span{
          font-weight: normal;
          color: #b3b3b3;
        }
        &.alt{
          color: #2ecc71;
        }
      }
      .message{
        font-size: 12px;
        margin: 0;
        color: #2b2b2b;
      }
      .timestamp{
        font-size: 11px;
        position: absolute;
        bottom: 8px;
        right: 10px;
        text-transform: uppercase; color: #999
      }
    }
    .bubble-arrow {
      position: absolute;
      width: 0;
      bottom:42px;
      left: -16px;
      height: 0;
      &.alt{
        right: -2px;      
        bottom: 40px;
        left: auto;
      }
    }
    .bubble-arrow:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 9px solid #f5f5f5;
      border-radius: 0 20px 0;
      width: 15px;
      height: 30px;
      transform: rotate(145deg);
    }
    .bubble-arrow.alt:after {
      transform: rotate(45deg) scaleY(-1);
    }
  }
}