JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="flipBoxcontainer flipBox">
        <input id=ringMenu type=checkbox hidden/>
        <input id=flipOver type=checkbox hidden/>
        <div class="card">
            <div class="face front">
                <label for=flipOver class=flipOver></label>
                <label for=ringMenu class=ringMenu></label>
                <nav id=iconMenu class=iconMenuLeft>
                    <ul>
                       
                    </ul>
                </nav>
                <nav id=iconMenu class=iconMenuRight>
                    <span>&#9835</span>
                    <ul>
                        <li><div><span class="cH-BottonPlayer floatRight audioprev"></span></div><a>Prev</a></li>
                        <li><div><label class=playBotton></label></div><a>Play</a></li>
                        <li><div><span class="cH-BottonPlayer floatRight audionext"></span></div><a>Next</a></li>
                    </ul>
                </nav>
                <h2 class=toptitle>MusicBox</h2>
                 <figure class=post-img-svg>
                     <canvas class=canvasThumbnail></canvas>
                    <figcaption>
                        <p>27/10/2014</p>
                        <p>27/10/2014</p>
                    </figcaption>
                 </figure>
                 <div class=postExcerpt></div>
            </div>
            <div class="face back">
                <label for=flipOver class=flipOver></label>
                <h2 class=toptitle>View Menu 2</h2>
            </div>
         </div>
    </div>

CSS

* {
-webkit-font-smoothing: antialiased;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body{
 background:#333;   
}

.flipBoxcontainer {
    min-width: 242px; 
    height: 362px;
    float:left;
    -webkit-perspective: 1000;
    
}
.card, .flipBox .back,.flipBox .front{
    width: 100%; 
    height: 100%;  
}
.card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
    
}
    

.face {
    position: absolute;
    -webkit-backface-visibility: hidden;
}


    
.flipBox {
    float: left; position: absolute; top: 120px; right: 20px;
    -webkit-transform: rotate(0deg);
   
}
    
    .flipBox .back {
        -webkit-transform: rotateY(180deg);
    }
       
.flipBox .front {
    z-index: 10;
    overflow-x:hidden;
    overflow-y:auto;
    
}
.flipBox .front, .flipBox .back{
   background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 100%);
border:1px solid silver;
-khtml-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 0px 0 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 0px 0 5px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 0px 0 5px rgba(0, 0, 0, .1);
-ms-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 0px 0 5px rgba(0, 0, 0, .1);
-o-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 0px 0 5px rgba(0, 0, 0, .1);
box-shadow: 0 15px 10px -10px rgba(0, 0,...

JavaScript

var loadPacman, cvs, ctx;

loadPacman = function (posX, posY) {
    this.posX = posX;
    this.posY = posY;
    pacman = new Image();
    pacman.src="<?php echo get_post_thumbnail_url($post->ID); ?>";
    pacman.addEventListener("load", function(){
        ctx.drawImage(pacman, posX, posY);
    });
};

cvs = document.querySelector( 'canvas' );
ctx = cvs.getContext( '2d' );
loadPacman( 0, 0 );