JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<!-- Without Modernizr -->

<div class="books">
  <div id="book1" class="book">
    <img src="http://placehold.it/250x400" />
  </div>
</div>

<br><br><br><br><br><br>

<div class="books">
  <div id="book1" class="book">
    <img src="http://placehold.it/250x400" />
  </div>
  <div id="book2" class="book">
    <img src="http://placehold.it/250x400" />
  </div>
  <div id="book3" class="book">
    <img src="http://placehold.it/250x400" />
  </div>
</div>

SCSS

body {
    padding: 45px 15px;
}


/* Fallback styles */
.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}

.book img { 
    vertical-align: middle; 
}

/*
 *  In order for this to work, you must use Modernizer
 *  to detect 3D transform browser support. This will add
 *  a "csstransforms3d" class to the HTML element.
 *
 *  Visit http://modernizr.com/ for installation instructions
 */
.books {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.book {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent;
  Helps smooth jagged edges in Firefox
  box-shadow: none;
  margin: 0;
  img {
    position: relative;
    max-width: 100%;
  }
  &:before, &:after {
    position: absolute;
    top: 2%;
    height: 96%;
    content: ' ';
    z-index: -1;
  }
  &:before {
    width: 100%;
    left: 7.5%;
    background-color: #5a2d18;
    box-shadow: 5px 5px 20px #333;
  }
  &:after {
    width: 5%;
    left: 100%;
    background-color: #EFEFEF;
    box-shadow: inset 0px 0px 5px #aaa;
    -moz-transform: rotateY(20deg);
    -webkit-transform: perspective(100) rotateY(20deg);
  }
}

// Extra
#book2:before { background-color: #333; }
#book3:before { background-color: #254053; }