JSFiddle - React, Tailwind, and code Playground

by carlhong

HTML

<body>
  <div>
    <label for="checkbox">
      展示
    </label>
    <input id="checkbox" type="checkbox" />
    <div class="modal">
      <label class="close" for="checkbox">关闭</label>
    </div>
  </div>
</body>

CSS

input[type="checkbox"] {
  display: none;
}

label {
  line-height: 20px;
  padding: 2px 5px;
  background: #aaa;
  font-size: 14px;
  color: white;
  box-shadow: 0 0 2px #888888;
}

label:active {
  box-shadow: none;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 1);
}

#checkbox:checked~.modal {
  display: flex;
}

.close {
  margin: auto;
}