JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flipper">
    <div class="front">
        <div class="nav">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">PHP</a></li>
                <li><a href="">SEO</a></li>
                <li><a href="">jQuery</a></li>
                <li><a href="">Wordpress</a></li>
                <li><a href="">Services</a></li>
            </ul>
            <div class="clear"></div>
        </div>
    </div>
    <div class="back">
        Back side...
    </div>
</div>

CSS

body { background: black; color: green; padding: 0; margin: 0; }

.nav{ background: white; z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}

.nav { height: 42px; background: white;}
.nav ul { list-style: none; position: fixed;}
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC; }
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}

/* Flipping css */

/* flip container */
body {
    perspective: 1000;
    -webkit-perspective: 1000;
}

html, body, .flipper, .front, .back { 
    width: 100%;
    height: 100%;
}

/*body:hover .flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}*/

/* flip speed goes here */
.flipper {
    transition: 2s;
	-webkit-transition: 0.6s;
    transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	position: fixed;
}

/* hide back of pane during swap */
.front, .back {
    height: 1000px;
    backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}