.info
 %h1 Draggable Chatbox
 %span
  Made with
  %i.fa.fa-heart.animated.infinite.pulse
  by
  %a{:href => "http://andytran.me"} Andy Tran
  .spoilers
   (Click the search button) | (Scroll the chat)
.chat
 %header
  %h2.title
   %a{:href => "https://www.elegantthemes.com/"} ElegantThemes
  %ul.tools
   %li
    %a.fa.fa-gear{:href => "#"}
   %li
    %a.fa.fa-search{:href => "#"}
 .body
  .search
   %input{:type => "text", :placeholder => "Search..."}
  %ul
   %li
    %a.thumbnail{:href => "#"}
     NR
    .content
     %h3 Nick Roach
     %span.preview hey how are things going on the...
     %span.meta
      2h ago ·
      %a{:href => "#"} Category
      · 
      %a{:href => "#"} Reply
   %li
    %a.thumbnail{:href => "#"}
     KS
    .content
     %h3 Kenny Sing
     %span.preview make sure you take a look at the...
     %span.meta
      3h ago ·
      %a{:href => "#"} Category
      · 
      %a{:href => "#"} Reply
   %li
    %a.thumbnail{:href => "#"}
     MS
    .content
     %h3 Mitch Skolnik
     %span.preview i love wood grain things!
     %span.meta
      6h ago ·
      %a{:href => "#"} Category
      · 
      %a{:href => "#"} Reply
   %li
    %a.thumbnail{:href => "#"}
     YP
    .content
     %h3 Yuriy Portnykh
     %span.preview check issues for the latest version...
     %span.meta
      10h ago ·
      %a{:href => "#"} Category
      · 
      %a{:href => "#"} Reply
   %li
    %a.thumbnail{:href => "#"}
     JR
    .content
     %h3 Josh Ronk
     %span.preview make sure to do the following by...
     %span.meta
      2d ago ·
      %a{:href => "#"} Category
      · 
      %a{:href => "#"} Reply
   %li
    %a.thumbnail{:href => "#"}
     BM
    .content
     %h3 Benjamin Mueller
     %span.preview Hi nice to meet you!
     %span.meta
      1w ago ·
      %a{:href => "#"} Category
      · 
      %a{:href => "#"} Reply
 %footer
  %a{:href => "#"} View All Messages
View Compiled
@accent: #bd6982;
@white: #ffffff;
@black: #000000;
@dark_gray: lighten(@black, 20%);
@gray: lighten(@black, 40%);
@light_gray: lighten(@black, 60%);

.transitions( @property: all; @duration: 0.3s; @timing: linear; @delay: 0s; ) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;  
}

.box-size-border-box() {
  -webkti-box-size: border-box;
  -moz-box-size: border-box;
  box-size: border-box;
}

.font-smoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: #e9e9e9;
  font-family: 'Roboto', sans-serif;
  .font-smoothing;
}
.chat {
  background: @white;
  width: 300px;
  margin: 0 auto;
  header {
    background: @accent;
    padding: 10px 15px;
    color: @white;
    font-size: 14px;
    cursor: move;
    &:before,
    &:after {
      display: block;
      content: '';
      clear: both;
    }
    h2 {
      margin: 0;
      padding: 0;
      font-size: 14px;
      float: left;
      a {
        color: @white;
        text-decoration: none;
      }
    }
    .tools {
      list-style: none;
      margin: 0;
      padding: 0;
      float: right;
      li {
        display: inline-block;
        margin-right: 6px;
        &:last-child {
          margin: 0;
        }
        a {
          color: @white;
          text-decoration: none;
          .transitions;
        }
      }
    }
  }
  .body {
    position: relative;
    max-height: 360px;
    overflow-y: scroll;
    .search {
      display: none;
      width: 100%;
      &.opened {
        display: block;
      }
      input {
        width: 100%;
        margin: 0;
        padding: 10px 15px;
        border: none;
        .box-size-border-box;
      }
    }
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      border-top: 1px solid darken(@white, 5%);
      li {
        position: relative;
        background: @white;
        display: block;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        &:before,
        &:after {
          display: block;
          content: '';
          clear: both;
        }
        &:hover {
          .thumbnail {
            background: @accent;
          }
        }
        &:nth-child(2n) {
          background: darken(@white, 5%);
        }
        .thumbnail {
          display: inline-block;
          background: darken(@white, 25%);
          width: 50px;
          color: @white;
          line-height: 50px;
          text-align: center;
          text-decoration: none;
          .transitions(@property: background;);
          img {
            width: 100%;
          }
        }
        .content {
          display: inline-block;
          margin-left: 6px;
          vertical-align: top;
          line-height: 1;
          h3 {
            &:extend(.chat header h2);
            display: block;
            width: 100%;
            margin-bottom: 5px;
            color: lighten(@black, 50%);
          }
          .preview {
            display: block;
            width: 100%;
            max-width: 200px;
            margin-bottom: 5px;
            color: darken(@white, 20%);
            font-size: 12px;
          }
          .meta {
            color: darken(@white, 30%);
            font-size: 12px;
            a {
              color: darken(@white, 40%);
              text-decoration: none;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
        .message {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          overflow: hidden;
          height: 100%;
          width: 100%;
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }
  }
  footer {
    a {
      background: @accent;
      display: block;
      width: 100%;
      padding: 10px 15px;
      color: @white;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
      box-sizing: border-box;
      &:hover {
        background: lighten(@accent, 10%);
        .transitions(@property: background;)
      }
    }
  }
}

.info {
  width: 300px;
  margin: 25px auto;
  text-align: center;
  h1 {
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    color: @dark_gray;
  }
  span {
    color: @gray;
    font-size: 12px;
    a {
      color: @black;
      text-decoration: none;
    }
    .fa {
      color: @accent;
    }
    .spoilers {
      color: @light_gray;
      margin-top: 5px;
      font-size: 10px;
    }
  }
}
View Compiled
$('.fa-search').click(function(){
 $(this).stop().toggleClass('fa-close');
 $('.search').stop().animate({height: "toggle", opacity: "toggle"}, 300);
});

 $('.chat').draggable({ handle: 'header' });
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://code.jquery.com/ui/1.11.2/jquery-ui.min.js