<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="frame">
  <div class="window">
    <div class="menu">
      <ul>
        <li id="m1" class="active" onclick="changeTab('Dashboard')"><span><i class="fas fa-tachometer-alt fa-fw"></i></span></li>
        <li id="m2" onclick="changeTab('View')"><span><i class="far fa-eye fa-fw"></i></span></li>
        <li id="m3" onclick="changeTab('Details')"><span><i class="far fa-sticky-note fa-fw"></i></span></li>
        <li id="m4" onclick="changeTab('Settings')"><span><i class="fas fa-cogs"></i></span></li>
        <li id="search"><span><i class="fas fa-search fa-fw"></i></span></li>
      </ul>
    </div>
    <div class="body" id="windowbody">
      <h1 id="title">
        Dashboard
      </h1>
      <p id="p1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </p>
      <p id="p2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </p>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
@color-background: #2b3642;
@color-window: #ffffff;
@color-menu: #3d4d5e;
@color-primary: #5da2ed;

// use only the availablspace inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: @color-background;
  color: #415868;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.window {
  position: absolute;
  width: 320px;
  height: 240px;
  top: 80px;
  left: 40px;
  background: @color-window;
  box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);
}

.menu {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 40px;
  background: @color-menu;
  ul {
    margin: 0; padding: 0;
    width: 100%;
    height: 40px;
    list-style: none;
    color: #aaa;
    li {
      position: relative;
      display: inline-block;
      height: 40px;
      width: 40px;
      cursor: pointer;
      &:hover {
        color: #fff;
      }
      &#search {
        float: right;
      }
      &.active {
        color: #ffff;
        background-color: @color-primary;
      }
      span {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.body {
  opacity: 0;
  margin-top: 60px;
  padding: 20px;
  h1 {
    margin: 0px 0px;
    font-size: 18px;
    font-weight: 200;
  }
  p {
    margin: 20px 0px;
    width: 100%;
    span {
      display: block;
      margin: 5px 0px;
      height: 5px;
      border-radius: 5px;
      background-color: #ededed;
    }
    &#p1 {
      span:nth-child(1) {
        width: 100%;
      }
      span:nth-child(2) {
        width: 90%;
      }
      span:nth-child(3) {
        width: 95%;
      }
      span:nth-child(4) {
        width: 88%;
      }
      span:nth-child(5) {
        width: 30%;
      }
    }
    &#p2 {
      span:nth-child(1) {
        width: 100%;
      }
      span:nth-child(2) {
        width: 94%;
      }
      span:nth-child(3) {
        width: 97%;
      }
      span:nth-child(4) {
        width: 70%;
      }
    }
  }
}

@keyframes appear {
  0% {
    opacity: 0;
    margin-top: 60px;
  }
  100% {
    opacity: 1;
    margin-top: 40px;
  }
}

@keyframes disappear {
  100% {
    opacity: 0;
    margin-top: 60px;
  }
}

document.getElementById("windowbody").style.animation = "appear 0.5s forwards";

function changeTab(name) {
  document.getElementById("title").innerHTML = name;
  document.getElementById("windowbody").style.animation = "none";
  document.getElementById("windowbody").style.opacity = "0";
  document.getElementById("windowbody").style.marginTop = "60px";
  setTimeout(function(){
    document.getElementById("windowbody").style.animation = "appear 0.5s forwards";
  }, 10);
}