index.slim

body
  div.page
    div.title page one
    div.content
      p A couple of lines here
      p Are always fun, right?
  div.page
    div.title page two
    div.content
      p A couple of lines here
      p Are always fun, right?
  div.page
    div.title page three
    div.content
      p A couple of lines here
      p Are always fun, right?
  div.page.active
    div.title page four
    div.content
      p A couple of lines here
      p Are always fun, right?
      p  
      p  
      p.info « Hover over those pages back there.

style.less

body {
  background-color: #474747;
  padding: 25px 300px;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Sans-Serif;
  font-weight: 300;
}

.page {
  display: inline-block;
  margin-left: -185px;
  background: white;
  max-width: 200px;
  min-height: 250px;
  box-shadow: 0px 4px 10px #000;
  padding: 5px;
  border: 2px solid #FFF;
  transform: translate(0px, 0px) translateZ(0);
  transition: all 0.1s;
  background-image: linear-gradient(-90deg, white 40%, #DCDCDC 90%);
  
  &:hover {
    transform: translate(-6px, -3px) rotate(-1.2deg);
  }
  &.active:hover {
    transform: translate(0px, 0px);
  }
  
  .title {
    float: left;
    color: silver;
    font-weight: bold;
    
    transform: rotate(90deg);
    transform-origin: 0% 100%;
  }
    
  .content {
    float: left;
    width: 85%;
    margin-left: 1.5em;
    
    p {
      margin: 0;
      padding: 0;
      &.info {
        color: silver;
      }
    }
  }
  
}