JSFiddle - React, Tailwind, and code Playground

by bchiasson

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
<a href="#" id="link_me">OPEN DIALOG</a>


  <div id="login_window">
    <div id="message" style="display: none; ">
    </div>

    <form action="/session" id="login_form" method="post" onsubmit="$.ajax({data:$.param($(this).serializeArray()) + '&amp;authenticity_token=' + encodeURIComponent('y7n9MVs960JJFkFjTCOBQqzEhlZi46N69wtb2wpRFlw='), dataType:'script', type:'post', url:'/session'}); return false;"><div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="y7n9MVs960JJFkFjTCOBQqzEhlZi46N69wtb2wpRFlw="></div>  
        <label for="email">Email</label><br>
        <input id="email" name="email" size="30" type="text">

        <label for="password">Password</label><br>
        <input id="password" name="password" size="30" type="password">

        <label for="remember_me">Remember me</label>
        <input id="remember_me" name="remember_me" type="checkbox" value="1">

      <input name="commit" type="submit" value="Log in"><p></p>
    </form>
  </div>

JavaScript

$("#login_window").dialog({
    bgiframe: true,
    autoOpen: true,
    closeOnEscape: true,
    draggable: false,
    hide: "scale",
    resizable: false
});

$("#link_me").bind("click", function(event) {
    $("#login_window").dialog("open");
    return false;
});