<div class="chrome">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="content">
      <header>
        <span id="logo">Rhino</span>
        <span id="yo-face"></span>
      </header>
      <div id="left">
        <div class="tab">
          <i class="fontawesome-envelope"></i>
          Inbox
        </div>
        <div class="tab">
          <i class="fontawesome-envelope-alt"></i>
          Sent
        </div>
        <div class="tab">
          <i class="fontawesome-spinner"></i>
          Drafts
        </div>
        <div class="tab">
          <i class="fontawesome-trash"></i>
          Junk
        </div>
        <div class="tab">
          <i class="fontawesome-key"></i>
          Archive
        </div>
        
        <div id="info"></div>
      </div>
    </div>
  </div>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);


body {
  cursor: pointer;
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #697586;
}

.chrome {
   width: 500px;
   height: 400px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -250px;
   margin-top: -200px;
   background-color: #34393D;
   border-radius: 3px;
   text-align: middle;
}

.content {
   position: inherit;
   background-color: #FFFFFF;
   top: 30px;
   right: 0px;
   left: 0px;
   bottom:0px;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
}

.circle {
  height: 7px;
  width: 7px;
  margin:10px 0px 0px 10px;
  display: inline-block;
  border-radius: 50%;
}
.circle:first-child{
  
  background: #CF7C7A;
}
.circle:nth-child(2){
  background: #CCB37B;
}
.circle:nth-child(3){
  background: #78B885;
}

header {
  background: #46C3B6;
  height: 50px;
  width:100%;
  position: inherit;
}

#logo {
  color: #FFF;
  padding-top: 15px;
  text-align: center;
  font-weight: 800;
  position: inherit;
  background: #29B6A7;
  height: 100%;
  width: 200px;
}

#left {
  background: #434C55;
  top: 50px;
  bottom: 0px;
  width: 200px;
  position: inherit;
}

.tab {
  font-size: 12px;
  padding: 15px 25px;
  font-family: 'FontAwesome', sans-serif;
  color: #949BA7;
  border-bottom: 1px solid #4C5560;
}
.tab:hover {
  background: #4C5560;
}
div i {
  margin-right: 10px;
}

#yo-face {
  position: inherit;
  border-radius: 50%;
  background-size: 100%;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  transform: scaleX(-1);
  right: 5px;
  border: 3px solid #FFF;
  background-image: url("http://www.myfacewhen.net/uploads/3633-you-dont-say.jpg");
}
$(function() {
    $( ".chrome" ).resizable({
      minHeight: 300,
      minWidth: 300
    }).draggable({
      cursor: "move"
    });
  });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.