JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<div id="overlay" style="background-color:red">
  <div id="modal_wrapper" style="background-color:green">
          <div id="modal_content" style="background-color:blue">
         
                <form action="" method="post">
                <div id="modal_content_left">
                Register
               
                <ul>
               
                        <li class="required double" type="none">
 
                                                <label>
                                                       
                                                        <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/>
                                                       
                                                </label>
                       
                        <label>
                                                         <br />
                                                        <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/>
                                                       
                                                </label>
                        <label>
                                                        <br />
                                                        <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/>
                                                       
                                                </label>
                       
 
                                                <label>
                                                        <br />
                                                        <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/>
                                               ...

JavaScript

$(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content
       
        //On Click Event
        $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content
                var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active content
                return false;
        });


    var arrInputs = document.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var curInput = arrInputs[i];
        if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "password")
            HandlePlaceholder(curInput);
    }
function HandlePlaceholder(oTextbox) {
    if (typeof oTextbox.placeholder == "undefined") {
        var curPlaceholder = oTextbox.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0) {
            oTextbox.value = curPlaceholder;
            oTextbox.setAttribute("old_color", oTextbox.style.color);
            oTextbox.style.color = "#c0c0c0";
            oTextbox.onfocus = function() {
                this.style.color = this.getAttribute("old_color");
                if (this.value === curPlaceholder)
                    this.value = "";
            };
            oTextbox.onblur = function() {
                if (this.value === "") {
                    this.style.color = "#c0c0c0";
                    this.value = curPlaceholder;
                }
            };
        }
    }
}
$('#overlay').on('click', function(event){console.log(event)
    if (event.target == $('#overlay').get(0)){
        overlay();
   ...