JSFiddle - React, Tailwind, and code Playground

by gajjargaurav

HTML

<body>
    <div class="passwordTextBox"><select class="pretty dk" id="countries" name="CountryId" style="opacity: 0.01; margin: 0px; padding: 0px; font-size: 12px; height: 32px;"><option value="327">United States</option>
<option value="376">Abkhazia</option>
<option value="194">Afghanistan</option>
<option value="377">Akrotiri and Dhekelia</option>
<option value="378">Åland Islands</option>
<option value="256">Albania</option>
<option value="141">Algeria</option>
<option value="379">American Samoa</option>
<option value="257">Andorra</option>
<option value="142">Angola</option>
<option value="380">Anguilla</option>
<option value="381">Antarctica</option>
<option value="305">Antigua and Barbuda</option>
<option value="328">Argentina</option>
<option value="258">Armenia</option>
<option value="382">Aruba</option>
<option value="383">Ashmore and Cartier Islands</option>
<option value="242">Australia</option>
<option value="259">Austria</option>
<option value="260">Azerbaijan</option>
<option value="384">Azores, Autonomous Region of the</option>
<option value="306">Bahamas</option>
<option value="195">Bahrain</option>
<option value="196">Bangladesh</option>
<option value="307">Barbados</option>
<option value="261">Belarus</option>
<option value="262">Belgium</option>
<option value="308">Belize</option>
<option value="143">Benin</option>
<option value="386">Bermuda</option>
<option value="197">Bhutan</option>
<option value="329">Bolivia, Plurinational State of</option>
<option value="389">Bonaire, Sint Eustatius and Saba</option>
<option value="263">Bosnia and Herzegovina</option>
<option value="144">Botswana</option>
<option value="391">Bouvet Island</option>
<option value="330">Brazil</option>
<option value="392">British Indian Ocean Territory</option>
<option value="198">Brunei Darussalam</option>
<option value="264">Bulgaria</option>
<option value="145">Burkina Faso</option>
<option value="146">Burundi</option>
<option value="393">Büsingen am...

CSS

.popreg-container{
    background-color:#606060;
    opacity:0.5;
    filter:alpha(opacity=50);
    margin:0 auto;
    top:0;
    left:0;
    position:absolute;
    z-index:10000;
}

.popreg{
    z-index: 10001;
    font:16px Arial,Helvetica,sans-serif;
    position:fixed;
    top:167px;
    left: 50%;
    width:482px;
    margin:0 -260px;
    padding:19px;
}

.popreg .popreg-body-cont{
    padding:3px;
    background-color:#FFF;
}

.popreg .popreg-body{
    border:1px dotted #D6D9DE;
    margin:0;
    padding:20px 20px 10px;
    overflow:hidden;
}

.popreg .popreg-body p{
    margin:0;
    padding:0;
}

.popreg .popreg-actions{
    margin:15px 0 10px;
    padding:0;
    list-style: none;
}

.popreg .popreg-actions li{
    display: inline;
    padding:6px 10px;
    margin-right:10px;
    font-size:10px;
    text-transform:uppercase;
    color:#FFF;
    font-weight:400;
    cursor:pointer;
}

#sml.popreg{
   /* background:transparent url('./sml-popup-bg.png') 0 0  repeat; */
}
#aus.popreg{
   /* background:transparent url('./aus-popup-bg.png') 0 0  repeat; */
    font: 14px;
    line-height:18px;
    top: 367px;
}
#tes.popreg{
   /* background:transparent url('./tes-popup-bg.png') 0 0  repeat;*/
     top: 567px;
}
#sml .popreg-body{
    color:#7b8288;
}
#aus .popreg-body{
    color:#52515C;
}
#tes .popreg-body{
    border:1px dotted #D6DADF;
    color:#798389;
}
#sml .popreg-body p{
    color:#008AC9;
}
#aus .popreg-body p{
    color:#F29159;
}
#tes .popreg-body p{
    color:#52515C;
}
#sml .popreg-actions li{
    background-color:#008AC9;
}
#aus .popreg-actions li{
    background-color:#F29159;
}
#tes .popreg-actions li{
    background-color:#0099CC;
}
#sml .popreg-actions li:hover{
    background-color:#00305E;
}
#aus .popreg-actions li:hover{
    background-color:#029159;
}
#tes .popreg-actions li:hover{
    background-color:#52515C;
}

.passwordTextBox {
border-bottom: dotted 1px #757575;
 padding-bottom:0;
 margin-top: 6px;
 width:280px;
 margin-bottom:6px;
 
}

JavaScript

$("select#countries").bind('change', function () {
        console.log('it is called');
        var popup = function (popregContainer, popreg, redirectUrl, querystring, yesId, noId) {
            var resizeContainer = function () {
                popregContainer.css({
                    'width': $(window).width(),
                    'height': $(window).height()
                });
            };
            $('body').append(popregContainer);
            $('body').append(popreg);
            $(window).bind('resize', resizeContainer);
            resizeContainer();
            $(yesId, popreg).on('click', function () {
               // s.events = s.apl(s.events, "event35", 0);
                document.body.style.cursor = 'wait';
                setTimeout(function () {
                    document.body.style.cursor = 'default';
                    window.location.replace("https://" + redirectUrl + '?' + querystring);
                }, 3000);
            });
            $(noId, popreg).on('click', function () {
                popreg.remove();
                popregContainer.remove();
                // s.events = s.apl(s.events, "event34", 0);
                $(window).unbind('resize', resizeContainer);
            });
        },
        buildpopup = function (message, id, urlFld) {
            var regContainer = $('<div class="popreg-container"></div>'),
                popupmessage = message,
                popReg = $('<div id="' + id + '"><div id="popreg"><div class="popreg-body-cont"><div class="popreg-body">' + popupmessage + '<ul class="popreg-actions"><li>No thank you</li><li>Yes Please</li></ul></div></div></div></div>'),
                urlVal = '',
                emailFld = $("form#joinUs input#email"),
                querystring = location.search.substring(1) + ((emailFld.val().length > 0) ? ('&email=' + emailFld.val()) : '');
            if (urlFld.length > 0) urlVal = urlFld.val();
            popup(regContainer, popReg, urlVal, querystring,...