JSFiddle - React, Tailwind, and code Playground

by asou ryouma

HTML

<p class="button">モーダルウィンドウを開く</p>
<div id="bg">
<div id="modal">開きました！<span>閉じる</span></div>
</div>

CSS

.button{
  width:200px;
  padding: 20px;
  margin:0 auto;
  background-color:#fff;
  text-align:center;
  font-weight:bold;
  cursor:pointer;
}

#bg{
  background-color: rgba(0,0,0,0.5);
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  display:none;
}

#modal{
  width:500px;
  margin:10px auto 0;
  padding: 50px;
  background-color:#fff;
  text-align:center;
  position: relative;
  border: solid: 1px #ccc;
}

#modal span{
  position: absolute;
  right: 5px;
  top: 5px;
  cursor:pointer;
}