JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<a href="#" class="view">
    <p class="view-back">
        <img src="http://lorempixel.com/300/200/nature/" />                
        <span class="icon">566<span> views and</span></span>
        <span class="icon">124<span> likes</span></span>
        <span class="go"></span>
    </p>
    <div class="slice s1">
        <span class="overlay"></span>
        <div class="slice s2">
            <span class="overlay"></span>
            <div class="slice s3">
                <span class="overlay"></span>
                <div class="slice s4">
                    <span class="overlay"></span>
                    <div class="slice s5">
                        <span class="overlay"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>

CSS

body
{
    background-color: #E4E4E4;
    overflow: hidden;
    font-family: sans-serif;
}
.view
{
    display: block;     
    position: relative;
    width:  300px;
    height: 200px;
    margin: 10px;
    border: 10px solid #fff;
    background-color: #333;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);

    -webkit-perspective: 500px;
       -moz-perspective: 500px;
        -ms-perspective: 500px;
         -o-perspective: 500px;
            perspective: 500px;
}

.view .slice
{
    width:  60px;
    height: 100%;
    z-index: 100;
    background-image: url(http://lorempixel.com/300/200/nature/);
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    
    -webkit-transform-origin: left center;
       -moz-transform-origin: left center;
        -ms-transform-origin: left center;
         -o-transform-origin: left center;
            transform-origin: left center;
    
    -webkit-transition: -webkit-transform 150ms ease-in-out;
       -moz-transition:    -moz-transform 150ms ease-in-out;
        -ms-transition:     -ms-transform 150ms ease-in-out;
         -o-transition:      -o-transform 150ms ease-in-out;
            transition:         transform 150ms ease-in-out;
        
}
.view div.view-back
{
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    background: #666;
    z-index: 0;
}
.view div.view-back img
{
    position: absolute;
    left: -9999em;
    width: 1px;
    overflow: hidden;
}

.view-back .icon
{
    display: block;
    float: right;
    padding: 5px 20px 5px;
    width: 100%;
    text-align: right;
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}
.view-back .icon span
{
    position: absolute;
    left: -9999em;
    width: 1px;
    overflow: hidden;
}
.view-back .icon:first-child {
    padding-top: 20px;
}

.view-back .go
{
    display: bock;
   ...