JSFiddle - React, Tailwind, and code Playground

by robarwebservices

HTML

<div id="oAuthPanel">
    
    <form id="oAuthCompleteAcct" name="oAuthCompleteAcct" method="POST">
        <input type="text" name="h" id="h" value="" maxlength="10" />
        <input type="hidden" name="oaStep" id="oaStep" value="2" />
        
        <h4>Welcome! Complete your account details:</h4>

                    
        <!-- form-switching radio buttons -->           
        <div class="btn-group"> 
            <span id="oaSpanCreateNew" class="btn btn-large" type="button">
	            <label class="radio">
	                <input type="radio" id="fb_signup_btn" name="connect_type" value="fb_signup" checked="checked" />I am a new user
	            </label>
	        </span>
            <span id="oaSpanLinkNative" class="btn btn-large" type="button">
	            <label class="radio">
	                <input type="radio" id="fb_login_btn" name="connect_type" value="fb_login" />I am a returning user
	            </label>
	        </span>
        </div>
                    
                    
                    
        <h4>Email Address:</h4>
        <p>[email protected]</p>
        <h4>Username:</h4>	
        <p>Choose a username to link your facebook account to a new Billiards Forum account</p>
        <div id="fbNewUserNameResult"></div>
        <input type="text" id="fbNewUserName" name="fbNewUserName" value="USER_NAME" maxlength="255" />
         
        <input type="submit" id="oa_create_account" name="oa_create_account" value="Create Account" />
    </form>
    
</div>

CSS

#oAuthPanel {
    border: 1px solid #666;
    width: 1004px !important;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    padding: 20px 0 20px 20px;
}
#oAuthPanel table tr td {
    padding-right: 25px;
}
#oAuthPanel table tr td p {
    margin: 0;
}
#oAuthPanel table tr td h4 {
    margin-bottom: 0;
}
#oAuthCompleteAcct > input:first-of-type {
    display: none;
}
/* -------------------------------------------------- */
 #fb_popup #signupRadioBtns[data-toggle="buttons-radio"] {
    margin-bottom: 20px;
}

.btn-large {
    padding: 13px 22px;
    font-size: 14px !important;
    font-weight: bold;
    border-radius: 4px;
}
.btn {
    background-color: #edeef0 !important;
    background-image: none !important;
    color: #4e5763 !important;
    border: 1px solid #c2c6cc;
    text-shadow: 0 -1px transparent !important;
    font-weight: bold !important;
    background: linear-gradient(to bottom, #fff 0, #edeef0 100%) !important;
    padding: 10px 18px;
    font-size: 15px;
    border-radius: 3px;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    line-height: 18px;
    cursor: pointer;
    text-align: center;
    background-clip: border
}
#fb_popup .looking_for span, #fb_popup .user_type span {
    padding: 6px 13px;
    background-color: #edeef0 !important;
    background-image: none !important;
    color: #4e5763 !important;
    border: 1px solid #c2c6cc;
    text-shadow: 0 -1px transparent !important;
    font-weight: bold !important;
    background: linear-gradient(to bottom, #fff 0, #edeef0 100%) !important;
}
#fb_popup #signupRadioBtns .radio input, #fb_popup #fb_loading .radio input, #fb_popup #fb_link .radio input, #fb_popup #fb_error_div .radio input {
    margin-right: 10px;
}
.btn input[type="radio"] {
    margin-right: 7px;
    margin-left: -7px;
}

JavaScript

$('#oaSpanLinkNative').click(function () {
    $('#oAuthPanel').load('inc_ajax.asp?AJAX_ID=9&iMethod=2');
    $('#oa_create_account').attr('value', 'Link Accounts');
    jQuery('#fb_login_btn').attr('checked', 'checked').change();
});

$('#oaSpanCreateNew').click(function () {
    $('#oAuthPanel').load('inc_ajax.asp?AJAX_ID=9&iMethod=1');
    $('#oa_create_account').attr('value', 'Create Account');
    jQuery('#fb_signup_btn').attr('checked', 'checked').change();
});