JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card-flip-wrap">
    <div class="signup-modal front">
       <a class="btn-facebook-lrg">Sign Up with Facebook</a>
        <p class="signup-modal-text">Or sign up the <a href="#" class="flip-btn">old fashioned way?</a></p>
    </div><!-- end .signup-modal front -->    
    
    <div class="signup-modal back">
    
        <form>
            <label for="name" class="visuallyhidden">Name</label>
            <input type="text" name="name" id="name" value="" placeholder="Name" />
            
            <label for="email" class="visuallyhidden">Email</label>
            <input type="text" name="email" id="passsword" value="" placeholder="Email" />
            
            <label for="password" class="visuallyhidden">Choose a Password</label>
            <input type="text" name="password" id="password" value="" placeholder="Choose a Password" />
            
            <!-- temp - to be replaced with existing site code -->
              <label for="city">Choose your City:</label>
                  <select id="city-dropdown" class="dropdown" name="city">
                  <option value="volvo">Leeds</option>
                  <a class="dropdown-toggle" href="#">▼</a>
              </select>
            <!-- END temp -->
            
        </form>    
        
        <a class="btn-primary-lrg">Sign Up!</span></a>
        <p class="signup-modal-text">Rather sign up with <a href="#" class="flip-back-btn">Facebook?</a></p>
        </body>
    </div><!-- end .signup-modal back -->
</div><!-- end .card-flip-wrap -->

CSS

/* @override 
    http://localhost:8888/hellou/signup/css/signup.css */


/* notes styles - not needed by modals */    
.notes {
    margin: 20px auto 20px auto;
    width: 500px;
    font-family: "proxima-nova-alt",sans-serif;
    color: #565656;
    line-height: 1.5em;
}

.notes li {
    margin-bottom: 5px;
    margin-left: 35px ;
}

.caption strong {
    display: block;
}

.caption {
    margin-bottom: 50px;
}

/* end notes styles */



/* ========================================================
   START modal styles
   ======================================================== */

.signup-modal {
    position: relative;
    margin: 0 auto 30px auto;
    width: 530px;
    text-align: center;
    font-family: "proxima-nova-alt",sans-serif;
    -moz-box-sizing: border-box; /* apply natural box layout model*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 35px;
    border: 1px solid #b2dbf8;
    background: #ffffff; /* Old browsers */
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;    
            background-clip: padding-box; /* prevents bg color from leaking outside the border */    
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzIlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IyZGJmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 32%, #b2dbf8...

JavaScript

// Add classes to for card flip effect on clicks
    $('.flip-btn').click(function(){
        $('.card-flip-wrap').addClass('flip'); return false;
    });
    $('.flip-back-btn').click(function(){
        $('.card-flip-wrap').removeClass('flip'); return false;
    });