JSFiddle - React, Tailwind, and code Playground

by niuuin

HTML

<div class="container">
  <div class="board" hidden>
    <div class="title">看起来像内部公告</div>
    <span>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed impedit totam reprehenderit? Quia omnis qui
            quo assumenda voluptatum. Sit, eveniet iusto. Vero recusandae obcaecati, quis delectus reprehenderit
            eligendi aliquid dolores.
        </span>
  </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
  }

  .container {
    width: 60%;
    margin: 0 auto;
  }

  .board {
    background: #222;
    color: #fff;
    padding: 1rem;
    margin-top: 2rem;
  }

  .title {
    font-size: 3rem;
    font-weight: 600;
    margin: 1rem 0;
  }

  .board span {
    line-height: 1.2rem;
  }

  [hidden] {
    display: none !important;
  }

JavaScript

const board = document.querySelector('.board');

board.addEventListener('keyup', (event) => {
  if (event === 'h')
    board.hidden = !board.hidden;
})
// console.dir(board);