JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="paper"></div>

CSS

.paper{
    box-shadow:
        1px 2px 10px rgba(34, 34, 34, .5),
        20px -10px 0px #fff,
        20px -10px 6px rba(34, 34, 34, .5),
        -10px 10px 0px #fff,
        -10px 10px 6px rgba(34, 34, 34, .5);

         /*and just for fun (remember to prefix where appropriate)*/
        transform: rotate(-4deg);
        transition: all 0.5s;
}

/*for even more fun*/
.paper:hover{
    box-shadow:
        1px 2px 10px rgba(34, 34, 34, .5),
        30px -20px 0px #fff,
        30px -20px 6px rgba(34, 34, 34, .5),
        -20px 15px 0px #fff,
        -20px 15px 6px rgba(34, 34, 34, .5);
    transform: rotate(0deg);
}


/* Element Styles */

.paper{
    height:200px;
    width:75px;
}