<div class="left-side-wrapper">
  
  <div class="tab-nav-wrapper">
    <div class="tab active">
      Chat <span class="close-icon"></span>
    </div>
    <div class="tab inactive">
      Screen Sharing <span class="close-icon"></span>
    </div>
    <button class="add-panel">&plus; add panel</button>
  </div>
  
  <div class="conversation-wrapper">
<!-- message-* wraps the avatar div and message bubble -->
    <div class="message-left">
      <div class="avatar">
        <span class="status status-green"></span>
        <img src="http://placehold.it/48" alt="" />
      </div>
      <div class="left-bubble-wrapper user-blue">
          <div class="left-bubble user-blue">
            <span class="time-stamp">16 min ago</span>
            <h1>Alexander Smith</h1>
            <p>I noticed it yesterday only, and before reading your article. I wonder if they aren't only now starting to roll it out completely (and maybe coded the feature back in November).</p>
          </div>
        </div>
    </div>
    
    <div class="message-left">
      <div class="avatar">
        <span class="status status-blue"></span>
        <img src="http://placehold.it/48" alt="" />
      </div>
      <div class="left-bubble-wrapper user-pink">
        <div class="left-bubble user-pink">
          <span class="time-stamp">12 min ago</span>
          <h1>Anna Pearson</h1>
          <p>This is important stuff. Does it have a Wikipedia entry yet?</p>
        </div>
      </div>
    </div>
 
    <div class="message-right">
      <div class="avatar">
        <span class="status status-yellow"></span>
        <img src="http://placehold.it/48" alt="" />
      </div>
      <div class="right-bubble-wrapper">
        <div class="right-bubble">
          <span class="time-stamp">11 min ago</span>
          <h1>James Morrison</h1>
          <p>It's there from a long time...... 2+ years back, I came to know about this via littlebigdetails.com</p>
        </div>
      </div>
    </div>
    
    <div class="message-left">
      <div class="avatar">
        <span class="status status-green"></span>
        <img src="http://placehold.it/48" alt="" />
      </div>
      <div class="left-bubble-wrapper user-blue">
          <div class="left-bubble user-blue">
            <span class="time-stamp">5 min ago</span>
            <h1>Alexander Smith</h1>
            <p>Video testimonials can be recorded from anywhere with the Modulates video recorder and then uploaded from anywhere.</p>
          </div>
        </div>
    </div>
    
    
    
    
  </div>
  
  <div class="message-input-wrapper">
    
    <div class="message-left input-left">
      <div class="avatar">
        <span class="status status-yellow"></span>
        <img src="http://placehold.it/48" alt="" />
      </div>
      <div class="chat-input-wrapper">
        <textarea id="chat-input" wrap="hard" placeholder="Say something..."></textarea>
      </div>
          <button class="button message-send">Send</button>
      
    </div>
    
  </div>
  
</div>

* {
  box-sizing: border-box;
}

body {
  background-color: #F1F6F9;
  font-family: 'Roboto'
}

.left-side-wrapper {
  margin: 25px auto;
  max-width: 700px;
}

.tab {
  padding: 0.7em;
  width: 10.5em;
  display: inline-block;
  text-align: center;
  position: relative;
}

.active {
  color: #6C84DC;
  background-color: #FFFFFF;
  border-top: solid 5px #6C84DC;
  border-radius: 2px 2px 0px 0px;
  z-index: 10;
}

.inactive {
  color: #8D8D8D;
  background-color: #D7DDE4;
  border-top: solid 5px #D7DDE4;
  border-radius: 2px 2px 0px 0px;
  margin-left: -10px;
}

.close-icon:after {
  content: "\00D7";
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 1.25em;
  color: #C4C4C4;
}

.add-panel {
  color: #6C84DC;
  float: right;
  margin-top: 15px;
  border: none;
  background: none;
}

.message-input-wrapper {
  background-color: #FFFFFF;
  padding: 16px 20px;
}

.conversation-wrapper {
  height: 518px;
  overflow: auto;
  background-color: #FFFFFF;
  padding: 25px 20px 0px 20px;
}

.message-input-wrapper {
  border-top: solid 1px #D7DDE4;
}

.message-left, .message-right {
  margin-bottom: 1em;
  position: relative;
}

.message-left .avatar {
  float: left;
  margin-right: 1em;
}

.message-right .avatar {
  float: right;
  margin-left: 1em;
}

.avatar {
  position: relative;
}

.avatar img {
  border-radius: 3px;
  margin: 0;
  padding: 0;
}

.status {
  content: '';
  width: 7px;
  height: 7px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  bottom: 9px;
  right: 5px;
}

/* different status colors */ 

.status-green {
  background-color: #37DC52;
}

.status-yellow {
  background-color: #F2EB2C;
}

.status-blue {
  background-color: #1BD4F9;
}



.left-bubble-wrapper {
  float: left;
  width: 72%;
}

.right-bubble-wrapper {
  float: right;
  width: 72%
}

.message-left:after, .message-right:after {
  content: "";
  display: table;
  clear: both;
}

.left-bubble-wrapper:before {
  content:"";
  position: absolute;
  width: 1em;
  height: 1em;
  margin: 1.25em 0 0 -0.5em;
  transform: rotate(-45deg);
  border-radius: 2px; 
}

.message-right .avatar:before {
  content:"";
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #FFFFFF;
  margin: 1.25em 0 0 -25px;
  transform: rotate(-45deg);
  border-radius: 2px;
  border-right: solid 1px #D7DDE4;
  border-bottom: solid 1px #D7DDE4;
  z-index: 10;
}

.left-bubble-wrapper.user-blue:before {
  background-color: #E9EEFB;
}

.left-bubble-wrapper.user-pink:before {
  background-color: #F8EEFB;
}

.left-bubble {
  font-family: 'Roboto';
  font-weight: 400;
  color: #3F3F3F;
  width: 100%;
  line-height: 1.5em;
  padding: 1.25em 1em;
  background-color: #F7F7F7;
  border: none;
  border-radius: 3px;
  position: relative;
}

.right-bubble {
  font-family: 'Roboto';
  font-weight: 400;
  color: #3F3F3F;
  width: 100%;
  line-height: 1.5em;
  padding: 1.25em 1em;
  background-color: #FFFFFF;
  border: solid 1px #D7DDE4;
  border-radius: 3px;
  text-align: right;
  position: relative;
}

.left-bubble .time-stamp {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 0.75em;
  color: #8D8D8D;
}

.right-bubble .time-stamp {
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 0.75em;
  color: #8D8D8D;
}

.user-blue {
  background-color: #E9EEFB;
  border-radius: 3px
}

.user-pink {
  background-color: #F8EEFB;
  border-radius: 3px;
}

.left-bubble h1 {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 500;
}

.right-bubble h1 {
  margin: 0;
  padding: 0;
  font-size: 1em;
  font-weight: 500;
}

.user-blue h1 {
  color: #6C84DC;
}

.user-pink h1 {
  color: #DD77CB;
}

.left-bubble p {
  padding: 0;
  margin: 0;
}

.right-bubble p {
  padding: 0;
  margin: 0;
}

.chat-input-wrapper {
  margin: 0;
  padding: 0;
  width: 70%;
  float: left;
  position: relative;
}

.chat-input-wrapper:before {
  content:"";
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #f7f7f7;
  margin: 1.25em 0 0 -0.5em;
  transform: rotate(-45deg);
  border-radius: 2px; 
}

.input-left {
  margin-bottom: 0;
}

#chat-input {
  font-family: 'Roboto';
  font-weight: 400;
  color: #3F3F3F;
  width: 100%;
  height: 6em;
  line-height: 1.5em;
  padding: 1.25em 1em;
  background-color: #F7F7F7;
  border: none;
  overflow: auto;
  resize: none;
  position: relative;
  border-radius: 3px;
}

#chat-input::-webkit-input-placeholder {
  color: #BFBFBF;
}
#chat-input::-moz-placeholder {
  color: #BFBFBF;
}
#chat-input:-ms-input-placeholder {
  color: #BFBFBF;
}
#chat-input:-moz-placeholder {
  color: #BFBFBF;
}

#chat-input:focus {
  outline: none;
}

.message-send {
  float: right;
  width: 120px;
  height: 36px;
  background-color: #6C84DC;
  color: #FFFFFF;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  font-size: 0.85em;
  margin-top: 60px;
  letter-spacing: 0.65px;
  font-weight: 400;
}

.message-send:hover {
  opacity: 0.8;
}

.message-send:active {
  outline: none;
  background-color: #4c5d99;
}

.message-send:focus {
  outline: none;
}

/* scrollbar styling */

::-webkit-scrollbar {
  width: 4px;
  background-color: #D7DDE4;
}

::-webkit-scrollbar-thumb {
  width: 4px;
  background-color: #8D8D8D;
  border-radius: 2px;
}