JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
      
<script type="text/javascript">
    var cardNum=0;
</script>

        <meta charset="utf-8" />
        
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="css/styles.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    <!--[if IE 7]>
      <link rel="stylesheet" media="screen, projection" href="css/ie7.css" />
    <![endif]-->

    <!--[if IE 6]>
      <link rel="stylesheet" media="screen, projection" href="css/ie6.css" />
    <![endif]-->

 </head>
    



  <body>

        <div id="formContainer">
            <form id="login" method="post" action="./">
                <div id="nav1" class="nav">
                    <ul id="navBar">
                        <li class="prevBtn" id="prevBtn1"><a href="#" onclick="alert('FrontLeftLink')">FrontLeftLink</a></li>
                        <li class="nextBtn" id="nextBtn1"><a href="#" onclick="alert('FrontRightLink')">FrontRightLink</a></li>
                    </ul>
                
                        
                </div>
                <div class="items">
                    <div id="outerContainer" class="outerContainer">
                        <div class="innerContainer" id="innerContainer">
                           Click to flip
                        </div>
                    </div>
                </div>
                
                <a href="#" id="flipToRecover" class="flipLink"></a>
            </form>
            <form id="recover" method="post" action="./">
                
                <div id="nav2" class="nav">
                    <ul id="navBar2">
                        <li class="prevBtn1" id="prevBtn1"><a href="#" onclick="alert('BackLeftLink')">BackLeftLink</a></li>
                        <li class="nextBtn1" id="nextBtn1"><a href="#" onclick="alert('BackRightLink')">BackRightLink</a></li>
                    </ul>
...

CSS

/*-------------------------
    Simple reset
--------------------------*/


*{
    margin:0;
    padding:0;
}


/*-------------------------
    General Styles
--------------------------*/




body{
    padding: 50px 0 0;
}



section, footer{
    display: block;
}


/*----------------------------
    Styling the forms
-----------------------------*/


#formContainer{
    /*width:288px;*/
    width:400px;
    /*height:321px;*/
    height:223px;
    margin:0 auto;
    position:relative;
    z-index:1;
    
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
}

#formContainer form{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    
    /* Enabling 3d space for the transforms */
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    /* When the forms are flipped, they will be hidden */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Enabling a smooth animated transition */
    -moz-transition:0.8s;
    -webkit-transition:0.8s;
    transition:0.8s;
    
    /* Configure a keyframe animation for Firefox */
    -moz-animation: pulse 2s infinite;
    
    /* Configure it for Chrome and Safari */
    -webkit-animation: pulse 2s infinite;
}



#login{
    z-index:100;
}

#recover{
    z-index:1;
    opacity:0;
    
    /* Rotating the recover password form by default */
    -moz-transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

#formContainer.flipped #login{
    
    opacity:0;
    
    /* Rotating the login form when the flipped class is added to the container     */
    
    -moz-transform:rotateY(-180deg);
    -webkit-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}

#formContainer.flipped #recover{
    
    opacity:1;
    
    /* Rotating the recover div into view */
   ...

JavaScript

$(function(){

    // Checking for CSS 3D transformation support
    $.support.css3d = supportsCSS3D();
    
    var formContainer = $('#formContainer');
    
    // Listening for clicks on the ribbon links
    $('.flipLink').click(function(e){
        
        // Flipping the forms
        formContainer.toggleClass('flipped');


        //mark added to &&& below
        ///****maybe try adding in the get angle function here, and if 0, remove nav1 content??? (if 180, remove nav 2, add in nav 1)
        
        /*if (getAngle()==0)
        {
            alert("here");
            document.getElementById('nav1').innerHTML = "";
            $('#nav1').removeClass('nav');
            
        }*/
        

        //&&&

        
        // If there is no CSS3 3D support, simply
        // hide the login form (exposing the recover one)
        if(!$.support.css3d){
            $('#login').toggle();
        }
        e.preventDefault();
    });
    
    formContainer.find('form').submit(function(e){
        // Preventing form submissions. If you implement
        // a backend, you might want to remove this code
        e.preventDefault();
    });
    
    
    // A helper function that checks for the 
    // support of the 3D CSS3 transformations.
    function supportsCSS3D() {
        var props = [
            'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
        ], testDom = document.createElement('a');
          
        for(var i=0; i<props.length; i++){
            if(props[i] in testDom.style){
                return true;
            }
        }
        
        return false;
    }
});