JSFiddle - React, Tailwind, and code Playground

by KEN73CHEN

HTML

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<button class="w3-button w3-green w3-large" id="login">Login</button>
<div class="w3-modal w3-lightgray" id="id01">
　　<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width: 600px;">
　　　　<h1>Login Form</h1>
　　　　<button class='w3-button w3-large w3-gray w3-section' id='loginCancel'>取消</button>
　　</div>
</div>

JavaScript

　document.id('login').addEvent('click',function(event){
　　document.id('id01').setStyle('display','block');
　});
　document.id('loginCancel').addEvent('click',function(event){
　　document.id('id01').setStyle('display','none');
　});