JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function () {
jQuery('.modal-profile').fadeIn("slow");
        jQuery('.modal-lightsout').fadeTo("slow", .5);
    jQuery.noConflict();

    // Position modal box in the center of the page
    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");
        this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px");
        return this;
      }

    jQuery(".modal-profile").center();

    // Set height of light out div  
    jQuery('.modal-lightsout').css("height", jQuery(document).height());    

    // Fade in modal box once link is clicked
    /*
    jQuery('a[rel="modal-profile"]').click(function() {
        jQuery('.modal-profile').fadeIn("slow");
        jQuery('.modal-lightsout').fadeTo("slow", .5);
    });
    */

    // closes modal box once close link is clicked, or if the lights out divis clicked
    jQuery('a.modal-close-profile, .modal-lightsout').click(function() {
        jQuery('.modal-profile').fadeOut("slow");
        jQuery('.modal-lightsout').fadeOut("slow");
    });
});
</script>
<style type="text/css">
body {
    color:#333;
    background-color:#ec176c;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
.modal-profile h2 {
    font-size:2em;
    letter-spacing:-1px;
}
.modal-profile {
    display:none;
    height: 250px;
    width: 500px;
    padding:25px;
    border:1px solid #fff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
   ...