JSFiddle - React, Tailwind, and code Playground

Book

by Jennifer Perrin

HTML

<div class='book'>
    <div class='paper'>
            <div class='left'>
                <div class='head'>

                </div>
            </div>
            <div class='right'>

            </div>
        </div>
    </div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html{
  height: 100%;
}
body{
    background: -webkit-radial-gradient(center, ellipse cover, #5b6879 0%,#323e4c 100%);
    background:    -moz-radial-gradient(center, ellipse cover, #5b6879 0%,#323e4c 100%);
    background:      -o-radial-gradient(center, ellipse cover, #5b6879 0%,#323e4c 100%);
    font-family: "Open Sans", Sans-serif;
}
a{
    color:#2d5291;
    text-decoration: none;
}

.book{
    background: -webkit-linear-gradient(top, #677CA7 0%,#495a7e 100%);
    background:    -moz-linear-gradient(top, #677CA7 0%,#495a7e 100%);
    background:      -o-linear-gradient(top, #677CA7 0%,#495a7e 100%);
    width: 500px;
    height: 350px;
    margin:0px auto;
    margin-top: 100px;
    padding:8px;
    box-shadow:0px 5px 3px -3px rgba(255, 255, 255, 0.38) inset,0px 2px 3px rgba(0, 0, 0, 0.5);
}
.book:before{
    content: '';
    background: #333;
    width: 245px;
    height: 20px;
    display: block;
    position: absolute;
    margin-top: 312px;
    box-shadow: 10px 31px 30px black;
    -webkit-transform: rotate(-3deg);
       -moz-transform: rotate(-3deg);
         -o-transform: rotate(-3deg);
    z-index: -25;
}
.book:after{
    content: '';
    background: #333;
    width: 245px;
    height: 20px;
    display: block;
    position: absolute;
    margin-top: -40px;
    margin-left: 235px;
    box-shadow: 10px 31px 30px black;
    -webkit-transform: rotate(3deg);
       -moz-transform: rotate(3deg);
         -o-transform: rotate(3deg);
    z-index: -25;
}
.paper{
    background: #fff;
    background: -webkit-linear-gradient(right, #F3F3F3 0%,#ffffff 25%);
    background:    -moz-linear-gradient(right, #F3F3F3 0%,#ffffff 25%);
    background:      -o-linear-gradient(right, #F3F3F3 0%,#ffffff 25%);
    width: 235px;
    height: 350px;
    margin:0px 15px;
    box-shadow:0px 1px 3px rgba(0, 0, 0, 0.5),-5px 0px 0px white,-6px 0px 3px rgba(0, 0, 0, 0.5),-10px 0px 0px white,-11px 0px 3px rgba(0, 0, 0,...