JSFiddle - React, Tailwind, and code Playground

by DNCTrung

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<a href="#SignMeIn">
  <span>Login</span>
</a>

CSS

.pop-box-login {
  background-color: #FFF;
  padding: 10px 20px;
}

JavaScript

jQuery(function($) {
	$('[href="#SignMeIn"]').click(function(){
		$('.pop-box-login').toggle()
	});
	$('body').append(
		$('<div class="pop-box-login">').append(
	  	$('<p>').append(
	    	$('<label>').text('Username: '),
	      $('<input>', {type: "text", name:"username"})
	   	),
	  	$('<p>').append(
	    	$('<label>').text('Password: '),
	      $('<input>', {type: "password", name:"password"})
	   	),
	  	$('<p>').append(
	    	$('<label>').text('Remember me').prepend($('<input>', {type: "checkbox", name:"remember"}))
	   	),
	  	$('<p>').append(
	    	$('<button>',{type:"submit", text:"Login"})
	   	)
	  ).hide()
	)
});