JSFiddle - React, Tailwind, and code Playground

by sheshu036

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>      
        <div class="col-xs-12 shelf hidden-md hidden-lg"></div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>  
        <div class="col-xs-12 shelf"></div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title" class="img-responsive book"></a>
       	</div>  
        <div class="col-xs-12 shelf hidden-md hidden-lg"></div>
        <div class="col-xs-4 col-md-2">
          <a href=""><img src="http://placehold.it/150x190/e8117f/fff&amp;text=Book%20Title"...

CSS

.book {
	padding: 15px 0 0 0;
	margin: auto;
}
a:before { /* Just to give a little puddle of a shadow without adding another element */
	content: '';
    display: block;
    width: 80%;
    height: 1em;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    position: absolute;
    bottom:-10px;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index:-5;
}
.shelf {
	border-bottom: 30px solid #a5a5a5;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
	top: -15px;
	z-index: -10;
}
/*Example adding pseudo element to give shelf depth*/
.shelf:after {
	content: '';
	background: #686868;
	height: 20px;
	width: calc(100% + 40px); /*IE9+*/
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0 -20px;
}