JSFiddle - React, Tailwind, and code Playground

by shrenuj

HTML

<!-- This code is the CSS and js file for the popup which takes name as input country. -->
<script src="https://www.jquery-az.com/javascript/alert/dist/alertify.min.js"></script>
<link rel="stylesheet" href="https://www.jquery-az.com/javascript/alert/dist/alertify.core.css" />
<link rel="stylesheet" href="https://www.jquery-az.com/javascript/alert/dist/alertify.custom.css" />
<!-- the form to be viewed as dialog-->
<form id="loginForm">
    <fieldset>
        <label> Username </label>
        <input type="text" value="Mohammad"/> 

        <label> Password </label>
        <input type="password" value="password"/> 

        <input type="submit" value="Login"/>
    </fieldset>
</form>
<script>
  //this code is for the popup which takes name as input.
// have used AlertifyJS known for developing pretty browser dialogs and notifications.


alertify.genericDialog || alertify.dialog('genericDialog',function(){
    return {
        main:function(content){
            this.setContent(content);
        },
        setup:function(){
            return {
                focus:{
                    element:function(){
                        return this.elements.body.querySelector(this.get('selector'));
                    },
                    select:true
                },
                options:{
                    basic:true,
                    maximizable:false,
                    resizable:false,
                    padding:false
                }
            };
        },
        settings:{
            selector:undefined
        }
    };
});
//force focusing password box
alertify.genericDialog ($('#loginForm')[0]).set('selector', 'input[type="password"]');

  window.onload = promalert;
  </script>