JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class='vf-login-modal clearfix'>
    <div class='vf-login-form'>
        <div class='vf-login-form-inner'>
         
            <!-- viafoura-iframed content -->
            <form class='vf-tab-viafoura'>
                <h1>Login</h1>
                <div class='vf-notifications'></div>
                
                <label>Username or Email: <input type='text' id='vf-username'></label>
                <label>Password: <input type='password' id='vf-password'></label>
                <div class='clearfix'>
                    <a href='#' class='vf-forgot-login'>Forgot my password</a>
                    <button type='submit' class='vf-login-submit vf-button'>Submit</button>
                </div>
                <div class='vf-join'>
                    <h3><b>Don't have an account?</b> <span class='vf-join-now'><a href='#'>Join now.</a> It's free!</span></h3>
                </div>
            </form>
            <!-- /iframed content -->
            
            <!-- facebook-iframed content -->
            <div class='vf-tab-facebook' style='display:none;'>
                <h1>Login with Facebook</h1>
                <div class='vf-notifications'></div>
                
                <a href='#' class='vf-facebook-connect'><img...

CSS

.viafoura, .viafoura div, .viafoura span, .viafoura object, .viafoura iframe,
.viafoura h1, .viafoura h2, .viafoura h3, .viafoura h4, .viafoura h5, .viafoura h6, .viafoura p, .viafoura blockquote, .viafoura pre,
.viafoura abbr, .viafoura address, .viafoura cite, .viafoura code, .viafoura del, .viafoura dfn, .viafoura em, .viafoura img, .viafoura ins, .viafoura kbd, .viafoura q, .viafoura samp,
.viafoura small, .viafoura strong, .viafoura sub, .viafoura sup, .viafoura var, .viafoura b, .viafoura i, .viafoura dl, .viafoura dt, .viafoura dd, .viafoura ol, .viafoura ul, .viafoura li,
.viafoura fieldset, .viafoura form, .viafoura label, .viafoura legend,
.viafoura table, .viafoura caption, .viafoura tbody, .viafoura tfoot, .viafoura thead, .viafoura tr, .viafoura th, .viafoura td,
.viafoura article, .viafoura aside, .viafoura canvas, .viafoura details, .viafoura figcaption, .viafoura figure,
.viafoura footer, .viafoura header, .viafoura hgroup, .viafoura menu, .viafoura nav, .viafoura section, .viafoura summary,
.viafoura time, .viafoura mark, .viafoura audio, .viafoura video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.viafoura article, .viafoura aside, .viafoura details, .viafoura figcaption, .viafoura figure,
.viafoura footer, .viafoura header, .viafoura hgroup, .viafoura menu, .viafoura nav, .viafoura section {
  display: block;
}

.viafoura blockquote, .viafoura q { quotes: none; }

.viafoura blockquote:before, .viafoura blockquote:after,
.viafoura q:before, .viafoura q:after { content: ''; content: none; }

.viafoura ins { background-color: #ff9; color: #000; text-decoration: none; }

.viafoura mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

.viafoura del { text-decoration: line-through; }

.viafoura abbr[title], .viafoura dfn[title] { border-bottom: 1px dotted; cursor: help; }

.viafoura table { border-collapse: collapse; border-spacing: 0; }

.viafoura hr {...