JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/avgrund/0.1.0/css/avgrund.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/avgrund/0.1.0/js/avgrund.js"></script>
<script src="js/jquery.avgrund.js"></script>

JavaScript

$('.tab a').on('click', function (ev) {

    ev.preventDefault();
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');

    target = $(this).attr('href');
    $('.tab-content > div').not(target).hide();
    $(target).fadeIn(600);

});

$('#show').avgrund({
    showClose: true,
    showCloseText: 'close',
    onBlurContainer: '.container',
    template:
        '<br>' +
        '<ul class="tab-group">' +
        '<li class="tab active">' +
        '<a href="#signup" id="inscriptionMenu" onclick="return myFunction()">Inscription</a>' + '</li>' +
        '<li class="tab">' + '<a id="loginMenu" href="#login" onclick="return myFunction()">Log In</a>' + '</li>' +
        '</ul>' +


        '<div class="tab-content">' +
        '<div id="signup">' +

        '<div class="field-wrap">' +
        '<br>' + '<br>' +
        '<h1>Inscription</h1>' + '<br>' +
        '<label class="label2">Email Address<span class="req">*</span>' + '</label>' +
        '<br>' + '<br>' + '<input type="email" required="" autocomplete="off" class="input1">' +
        '</div>' +

        '<div class="field-wrap">' +
        '<label class="label2">Password<span class="req">*</span>' + '</label>' +
        '<br>' + '<br>' + '<input type="password" required="" autocomplete="off" class="input1">' +
        '</div>' + '<br>' +
        '<input type="button" value="s\'inscrire" class="buttonlogin" >' + '<br>' + '<br>' + '<h3>-- OU --</h3>' + '<br>' +

        '<input type="button" class="buttonfacebook" style=" background-image: url(images/facebook.png); ">' +
        '</div>' +

        '<div id="login" hidden=true>' +
        '<h1>Welcome Back!</h1>' +
        '</div>' +
        '</div>'




});