JSFiddle - React, Tailwind, and code Playground

by niuuin

HTML

<div class="container">
    <div id="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.getElementById('board');

    window.addEventListener('keyup', (event) => {
        if(event.key === 'h')
            board.hidden = !board.hidden;
    })